Add value to extjs textarea from store - extjs

I want to get data from mongo data base and add it to an extjs text area.
Everything is ready, my mongo data base returns a list of user email addresses that I want to add to the extjs text area.
I use this code:
var index = Ext.StoreMgr.lookup("writeup.store.Employee").findExact('name',name);
var rec = Ext.StoreMgr.lookup("writeup.store.Employee").getAt(index);
alert(rec.data.name);
But I get this error:
TypeError: Ext.StoreMgr.lookup(...) is undefined
And this is my store
Ext.define('writeup.store.Employee', {
extend: 'Ext.data.Store',
model: 'writeup.model.Employee',
autoLoad: true,
proxy: {
type: 'ajax',
actionMethods: {
read : 'POST'
},
api: {
read : 'user/view.action'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'employee'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});

try this
Load this code into your controller
var store_name = Ext.create('Ext.data.Store', {
model: 'model name'
});
store_name.load();
store_name.each(function(record){
for(var i=0;i<record.data.yourlocalstorageid.length;i++){
var index = record.data.yourlocalstorageid[i].name;
}
}

Related

ExtJs-> Ext.Store.proxy.writer error: No type specified for writer.create

So I have upgraded from extjs4 to extjs6 and this store always have this error:
No type specified for writer.create
This code has two uses:
For getting the data for the initial page
For getting the data for whenever a button is clicked.
Whenever I comment out the proxy.writer code portion, it will produce the data for the initial page.
But whenever I won't comment it out, it will not get the data for the initial page.
And it will also return this error whenever I clicked a button:
Uncaught TypeError: items.slice is not a function
So my question is, is the writer portion have wrong syntax or something since it is updated to extjs6?
P.S. I tried to change the
this.callOverridden to this.callParent since it states that the this.callOverridden is already deprecated, still has the same error.
Ext.define('Stm.store.stmpdate', {
extend: 'Extends.data.Store',
requires: [
'Cstm.Setting',
'Stm.model.stmpdate'
],
model: 'Stm.model.stmpdate',
pageSize: Stm.Const.controller.dataCountLimit,
remoteSort: true,
proxy: {
type: 'ajax',
url: Cstm.Setting.getEntryUrl() + '/stm/stm-update/stm-update',
reader: {
type: 'json',
rootProperty: 'data'
},
writer: Ext.data.writer.Json.override({
getRecordData: function() {
var data = this.callOverridden(arguments);
var record = arguments[0];
if ( record.associations.length > 0 ) {
Ext.Array.each(record.associations.keys, function(key) {
data[key] = [];
var assocStore = record[key]();
Ext.Array.each(assocStore.data.items, function(assocItem) {
data[key].push(assocItem.data);
});
});
}
return data;
}
}),
api: {
create: Cstm.Setting.getEntryUrl() + '/stm/stm-update/application',
update: Cstm.Setting.getEntryUrl() + '/stm/stm-update/approval'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
},
sorters: [
{property: 'aplDatetime', direction: 'DESC'},
{property: 'siteDomain', direction: 'ASC'},
{property: 'pageName', direction: 'ASC'}
]
});
Model:
Ext.define('Stm.model.stmpdate', {
extend: 'Ext.data.Model',
fields: [
{name: 'siteId', type: 'integer'},
{name: 'siteName', type: 'string'},
{name: 'siteUrl', type: 'string'},
{name: 'tmpId', type: 'integer', defaultValue: 1},
{name: 'updType', type: 'string'}
],
hasMany: [{
model: 'Stm.model.ServerInfo',
name: 'servers',
associationKey: 'servers',
reference: 'tmpId'
}]
});
Yes, you are using override in a way that may have worked in ExtJS 4 but is AFAIK unsupported across all versions of ExtJS.
What you want to do is define your custom writer as a new class:
Ext.define('MyApp.app.data.MyCustomJsonWriter', {
extend: 'Ext.data.writer.Json',
alias: 'writer.mycustomjson',
getRecordData: function() {
var data = this.callParent(arguments);
var record = arguments[0];
if ( record.associations.length > 0 ) {
Ext.Array.each(record.associations.keys, function(key) {
data[key] = [];
var assocStore = record[key]();
Ext.Array.each(assocStore.data.items, function(assocItem) {
data[key].push(assocItem.data);
});
});
}
return data;
}
});
require that class from your store:
requires: [
'MyApp.app.data.MyCustomJsonWriter'
]
and then instantiate it by alias:
writer: {
type: 'mycustomjson'
}

ExtJS — How to load store data manually after ajax call?

I rewrite my working Fiddle from ajax proxy type to memory. I'm trying to load memory store data manually:
// app/model/Employees.js file
Ext.define('Fiddle.model.Employees', {
extend: 'Ext.data.Model',
entityName: 'Employees',
fields: [
{
name: 'profile_pic'
},
{
type: 'int',
name: 'age'
},
{
type: 'string',
name: 'last',
mapping: 'name.last'
},
{
type: 'string',
name: 'first',
mapping: 'name.first'
},
{
type: 'string',
name: 'email'
}
],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total',
successProperty: ''
}
}
});
// app/store/Employees.js file
Ext.define('Fiddle.store.Employees', {
extend: 'Ext.data.Store',
pageSize: 30, // items per page
alias: 'store.employees',
model: 'Fiddle.model.Employees',
});
//app.js fule - launch() function
var store = Ext.create('Fiddle.store.Employees');
console.log(store);
Ext.Ajax.request({
url: 'mates.json',
success: function(resp) {
var result = resp.responseText;
console.log(result);
// store.loadRawData(result);
store.loadData(result);
console.log(store);
console.log(store.getAt(0));
},
});
As result I have 3386 records in store, every symbol in my json file. And what I see in console as first record:
What I'm doing wrong?
And where I need to put proxy lines - in model or in store?
responseText is a string, which contains the serialized JSON data. You have to deserialize it into an object before you can use loadRawData to load the object through the model converters into the store:
var result = Ext.decode(resp.responseText);
store.loadRawData(result);
loadData and loadRawData differ in that loadData does not call the converters on the model. loadRawData is equivalent to what the ajax proxy does, loadData is not.
Did it in this way:
//in Grid panel js file
listeners: {
afterrender: function(grid, evt) {
var myStore = grid.getStore();
Ext.Ajax.request({
url: 'mates.json',
success: function(resp) {
var result = Ext.decode(resp.responseText);
myStore.getProxy().data = result;
myStore.load();
},
});
}
}
In store autoLoad: true must be disabled. This way of loading instead of store.loadRawData(result); shows the correct number of records in the pagingtoolbar.

Issue with Row Editing Plugin in Extjs

I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below
My proxy model is:
Ext.define('proxymodel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
persist: false
}, {
name: 'gender',
type: 'auto'
}, {
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'int'
}],
identifier: 'sequential', // to generate -1, -2 etc on the client
proxy: {
type: 'rest',
//format: 'json',
//appendId: false,
idParam: "id",
//limitParam:"",
//filterParam: "",
//startParam:'',
//pageParam:'',
url: 'http://localhost:3000/posts',
api: {
read: 'http://localhost:3000/db',
create: 'http://localhost:3000/posts',
update: 'http://localhost:3000/posts',
destroy: 'http://localhost:3000/posts'
},
headers: {
'Content-Type': "application/json"
},
reader: {
type: 'json',
rootProperty: 'posts',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
});
In Application.js, I have defined row editing plugin as:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
},
edit: function(editor, e) {
// commit the changes right after editing finished
e.record.commit();
}
}
});
And my store looks like:
Ext.define('Store', {
extend: 'Ext.data.Store',
storeId: 'peopleStore',
pageSize: 500,
//buffered: true,
//leadingBufferZone: 300,
pageSize: 5,
autoLoad: {
start: 0,
limit: 5
},
autoSync: true,
sorters: [{
property: 'age',
direction: 'ASC'
}],
groupField: 'gender'
});
Can anyone point out my mistake?
I have tried to reload my store after editing in 'edit' function of rowEditing but it didn't work.
Thanks for your time.
As full answer by request:
Have you tried Ext.data.StoreManager.lookup('peopleStore').reload() ?

store.sync after pressed OK button only reload the store

Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, {name: 'Route_Seq' , type: 'int'},'Location_Name','Route_LocationID','Route_ID']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteSeqModel',
storeId: 'RouteSeqStore',
autoLoad: false,
sorters: [{
property: 'Route_Seq',
direction: 'ASC'
}],
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
//read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
baseParams: {
_id : 0,
},
reader: {
type: 'json',
idProperty: '_id'
},
writer: {
type: 'json',
id: '_id'
}
}
});
RouteSeqStore.sync({
success: function(batch) {
//var button = Ext.getCmp('BtnRouteSeqRefresh');
//button.fireEvent('click', button); //need at here , if not too fast refresh will get the old data
grid.setLoading(false);
Ext.MessageBox.show({
title: "Information",
msg: batch.operations[0].request.scope.reader.jsonData["message"],
icon: Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK,
fn: function(buttonId) {
if (buttonId === "ok") {
//load store at here
}
}
});
},
failure: function(batch){
//var button = Ext.getCmp('BtnRouteSeqRefresh');
//button.fireEvent('click', button); //need at here , if not too fast refresh will get the old data
grid.setLoading(false);
RouteSeqStore.rejectChanges();
Ext.MessageBox.show({
title: "Error",
msg: batch.operations[0].request.scope.reader.jsonData["message"],
icon: Ext.MessageBox.ERROR,
buttons: Ext.MessageBox.OK,
fn: function(buttonId) {
if (buttonId === "ok") {
//load store at here
}
}
});
}
});
whenever called .sync function will automatically load the datastore with get-routeseq.php ,
is that have any way after pressing OK button only load the datastore(after pressed OK only call the get-routeseq.php)?
my autoLoad is false, but still automatically load the datastore.
I think you should use type: 'rest' and avoid url config in proxy.
Something like this:
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteSeqModel',
storeId: 'RouteSeqStore',
autoLoad: false,
sorters: [{
property: 'Route_Seq',
direction: 'ASC'
}],
proxy: {
type: 'rest',
api: {
create: 'insert-routeseq.php',
read: 'get-routeseq.php',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
baseParams: {
_id : 0,
},
reader: {
type: 'json',
idProperty: '_id'
},
writer: {
type: 'json',
id: '_id'
}
}
});
And if you want to just load store, use RouteSeqStore.load(). After you have made changes in store, use RouteSeqStore.sync().

How to get store object from existing store object in ExtJs

I am using ExjJs 4.2 .I have two grids displaying different data. In one javascript file i have to include both the grids. I am loading the store for the first grid like
var store = Ext.create('Ext.data.Store', {
model: 'Writer.Person',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'findPatientRecordAction',
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
root: 'data'
},
fields: ['id','notes', 'startDate', 'endDate'],
},
});
The JSON object store looks like this :
"data":[{"id":35,"notes":"hiii","startDate":"2013-04-30","endDate":"2013-05-02"}]} , "details":[{"id":14,"document":"docpath12345","date":"2013-04-28"}]
Actually the first grid will display only the 'data' part of JSON and the second grid will display the 'details' part of JSON. So ideally i should not load the store object again for the second grid(what i am doing now).I want to declare one more store type variable and reuse value of 'store' (the 'documents' part of store) to become the store for second grid as
I am loading the second store as of now like this
var store2 = Ext.create('Ext.data.Store', {
model: 'Writer.Document',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'findPatientRecordAction',
reader: {
type: 'json',
successProperty: 'success',
root: 'details',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
root: 'details'
},
fields: ['id','document', 'date'],
},
});`.
In both the cases i am calling the same action and getting the same JSON.
Can anyone help me out here that how can I declare another store object and get the value from the existing 'store' so that i should not have to load the same data for 2 times.
Regards : Dev
You can make the first store have autoload set to false. Then in the second store use the load event to inject the records into the first using that stores active proxy data:
var store2 = Ext.create('Ext.data.Store', {
model: 'Writer.Document',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'findPatientRecordAction',
reader: {
type: 'json',
successProperty: 'success',
root: 'details',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
root: 'details'
},
fields: ['id','document', 'date'],
},
listeners: {
load: function(store, records, successful, eOpts){
if(successful)
{
store1.loadData(store.proxy.reader.rawData.data);
}
}
}
});
I'll replace:
listeners: {
load: function(store, records, successful, eOpts){
if(successful)
{
store1.loadData(**store.getRange()**);
}
}
}
This is the same, I think:
store.proxy.reader.rawData.data <--> store.getRange()

Resources