I am trying to change extraparams of a treestore at runtime. I have tried the following (works on a normal store not treestore):
myshoporders_tree_store.getProxy().setExtraParam('order_no', order_no);
myshoporders_tree_store.reload();
Since i could not get the above to do what i wanted, i found a solution like this:
myshoporders_tree_store.reload({
params:{ order_no:order_no }
});
The only problem with the solution is that the params are not persistent i.e. after the filter, the params get reset again on store reload, tho i wud like to maintain the params for other purposes. Or am I not doing it right?
Pls help. Thnx.
My treestore:
var myshoporders_tree_store = Ext.create('Ext.data.TreeStore', {
autoload: false,
model: 'myshop_order_model',
proxy: {
type: 'ajax',
url: 'includes/order_cats.php',
extraParams: {shop_id: '',cat: '',status: '',order_date: '',order_no: '',buyer_name: '',order_id: '',id: ''},
reader: {
root: 'orders',
totalProperty : 'totalCount'
}
},
folderSort: false
});
My model:
Ext.define('myshop_order_model', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'string' },
{ name: 'cat', type: 'string' },
{ name: 'shop_id', type: 'string' },
{ name: 'plid', type: 'string' },
{ name: 'invid', type: 'string' },
{ name: 'rectype', type: 'string' },
{ name: 'order_number', type: 'string' },
{ name: 'order_date', type: 'string' },
{ name: 'buyer_name', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'read', type: 'string' },
{ name: 'invoice_total', type: 'string' },
{ name: 'total', type: 'string' }
]
});
I have since tried the following example i got from sencha forum to try and isolate the problem:
var store = Ext.create('Ext.data.TreeStore', {
fields: ['foo'],
proxy: {
type: 'ajax',
url: 'data/json.json',
extraParams: {
one: 'one'
}
}
});
Ext.widget('button', {
renderTo: document.body,
text: 'Load Store',
handler: function () {
store.load();
}
});
Ext.widget('button', {
renderTo: document.body,
text: 'Set Params',
handler: function () {
store.getProxy().setExtraParam('one', 'two');
}
});
Ext.widget('button', {
renderTo: document.body,
text: 'Reload Store',
handler: function () {
store.reload();
}
});
The only problem am getting is that the extraparam does not get assigned the first time i click 'load->set params-> reload' based on firebug output. The extraparam 'one' always has the value 'one'. No matter how many times i click on set params-> reload.
I have to click load once again for the new values to be visible i.e.
Load->set params->reload->Load
Is this how it should behave really? The Reload alone should be able to show the new param values. I dont have to reclick load to see the new values.
Pls help. Thnx.
It's actually quite easy, just access the extraParams object in the proxy and change the attributes. Your example would be like this:
myshoporders_tree_store.getProxy().extraParams.order_no = order_no;
myshoporders_tree_store.reload();
Sorry, just found out my solution. I was using ext-debug-all.js which was causing all this. When i changed to ext-all, it seems all is ok now. Thanx for all who tried in helping.
Related
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'
}
I'm using Sencha Touch 2.4, with Sencha Cmd 6.1.x (so I believe I'm using Ext JS 6). I've got the following model and store:
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
fields: [{
name: 'organizationId',
type :'int',
reference: {
type: 'Organization',
association: 'UsersByOrganization',
role: 'organization',
inverse: 'users'
}
}, {
"name": "matricola",
"type": "int"
}]
});
and
Ext.define('App.model.Organization', {
extend: 'Ext.data.Model',
fields: ['name']
});
I load my stores (with a 'sql' proxy) using the usual way, but I cannot find my reference anywhere. I simply get the records and I cannot call "users" or its inverse.
Any idea?
Sencha Touch 2.4 and ExtJS 6 are two different toolkits. Syntax for creating models and stores are similar in both, but not in all cases.
I believe what you are looking for is the StoreManager. If you have defined a store like so:
Ext.define('App.store.User', {
extend: 'Ext.data.Store',
storeId: 'User',
model: 'User'
});
Then you can reference the store like so:
// Return a list of users
Ext.getStore('User').getRange();
The code below works for me on Ext JS 6. Maybe you can model yours after this example:
Ext.define('App.model.Customer', {
extend: 'Ext.data.Model',
idProperty: 'customerNumber',
fields: [
{ name: 'customerNumber', type: 'int' },
{ name: 'customerName', type: 'string' },
{ name: 'contactLastName', type: 'string' },
{ name: 'contactFirstName', type: 'string' }
],
proxy: {
type: 'ajax',
url: '../../../api/CustomersAssociationsReference',
reader: {
type: 'json',
rootProperty: 'customers',
totalProperty: 'count'
}
}
});
Ext.define('App.model.Order', {
extend: 'Ext.data.Model',
idProperty: 'orderNumber',
fields: [
{ name: 'orderNumber', type: 'int' },
{
name: 'customerNumber', reference: {
type: 'App.model.Customer',
inverse: 'orders'
}
},
{ name: 'orderDate', type: 'string' },
{ name: 'status', type: 'string' }
],
proxy: { // Note that proxy is defined in the Model, not the Store
type: 'ajax',
url: '../../../api/OrdersAssociationsReference',
reader: {
type: 'json',
rootProperty: 'orders',
totalProperty: 'count'
}
}
});
Ext.application({
name: 'App',
models: ['Customer', 'Order'],
stores: ['Customers', 'Orders'],
launch: function () {
var customersStore = Ext.getStore('Customers');
customersStore.load(function (records, operation, success) {
var customer = records[0],
orders = customer.orders(),
order;
orders.load(function (records, operation, success) {
console.log('Orders for ' + customer.get('customerName') + ':\n-------------------------------------------------------');
for (i = 0, len = records.length; i < len; i++) {
order = records[i];
console.log('orderNumber: ' + order.get('orderNumber'));
console.log('orderDate: ' + order.get('orderDate'));
console.log('status: ' + order.get('status'));
console.log('-------------------------------');
}
})
});
}
});
I have created a model in ExtJS and then created another model which extends the first model. When use the second model in a store, I am getting JavaScript error.
TypeError: this.type.convert is not a function
this.defaultValue = this.type.convert(this.defaultValue);
-- Model--
Ext.define('myModel.FirstModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ID' },
{ name: 'Name' },
{ name: 'IsSelected', type: 'bool', defaultValue: false },
{ name: 'IsUpdated', type: 'bool', defaultValue: false },
]
});
--Second model--
Ext.define('myModel.TreeModel', {
extend: 'myModel.FirstModel',
fields: [
{ name: 'leaf', type: 'bool', defaultValue: false },
{ name: 'expanded', type: 'bool', defaultValue: false }
]
});
--Store --
Ext.define('myStore.TreeStore', {
extend: 'Ext.data.TreeStore',
requires: ['myModel.TreeModel'],
model: 'myModel.TreeModel',
autoLoad: false,
proxy: {
type: 'memory'
}
});
** If I do not extend from first model and just copy paste all the fields of first model into second model. I am getting the desired result. What is the cause of the error? What is the right way to extend a model **
Your way is the way... So, upgrade your version of Ext! The 4.1.0 is the only one I found that is concerned with this issue.
Or you can work around the problem by adding this line at the beginning of your code:
Ext.data.Types.AUTO.convert = function(v) {return v;};
Or you can work around it by ensuring all your inherited fields have either a defaultValue or a convert method:
Ext.define('myModel.FirstModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ID', defaultValue: null },
{ name: 'Name', defaultValue: null },
{ name: 'IsSelected', type: 'bool', defaultValue: false },
{ name: 'IsUpdated', type: 'bool', defaultValue: false },
]
});
Oh, and don't hesitate to give your precise version of Ext, even if you don't think it should matter with your question... One never knows!
i want to ask you if extjs comboboxes use filtered stores. I have a table with different kind of business(so it has a "type" field). I have a view with multiple comboboxes, and i want that those works with stores that use the same model, but with different filters. So when i put them to work, it doesn't work.
This is one of the filtered stores:
Ext.define('myapp.store.ListaAerolineas', {
extend: 'Ext.data.Store',
requires: [
'myapp.model.Empresa'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'myapp.model.Empresa',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://myapp.localhost/empresa/listar/',
reader: {
type: 'json',
root: 'listaempresa'
}
},
filters: {
property: 'IdTipo',
value: 5
}
}, cfg)]);
}
});
This is the model:
Ext.define('myapp.model.Empresa', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{
name: 'Id',
type: 'int'
},
{
name: 'Nombre',
type: 'string'
},
{
name: 'Direccion',
type: 'string'
},
{
name: 'Telefono',
type: 'string'
},
{
name: 'Contacto',
type: 'string'
},
{
name: 'Celular',
type: 'string'
},
{
name: 'TipoEmpresa',
type: 'string'
},
{
name: 'Estado',
type: 'string'
},
{
name: 'FechaCreacion',
type: 'date'
},
{
name: 'IdTipo',
type: 'int'
},
{
name: 'IdEstado',
type: 'int'
}
]
});
And finally this is my grid column definition for my combobox:
{
xtype: 'gridcolumn',
dataIndex: 'Aerolinea',
text: 'Aerolinea',
editor: {
xtype: 'combobox',
id: 'cmbGridListaEmbarquesAerolinea',
store: 'ListaAerolineas'
}
So, i must do anything? Thank you in advance...
What version of ExtJs are you using? but in general combobox will display only records that are filtered in the store. So, to answer your question - yes, it should work.
I need to Extjs Tree panel with dynamic remote data(JSON) for file listing.
and the date field name is not fit to Extjs tree store field. so I need to re-mapping to make fit, like adding leaf field and text field.
the return JSON data is like this:
[{
"id":1,
"yourRefNo":"A91273",
"documentName":"Test Document",
"documentFileName":"login_to_your_account-BLUE.jpg",
"updatedBy":"root root",
"updatedAt":"\/Date(1343012244000)\/"
}]
and this is the tree panel:
Ext.define('App.view.Document.DocumentList', {
extend :'Ext.tree.Panel',
rootVisible : false,
alias: 'widget.Document_list',
store: 'DocumentList_store'
});
and this is the store:
Ext.define('App.store.DocumentList_store', {
extend: "Ext.data.TreeStore",
model: 'App.model.DocumentList_model',
proxy: {
type: 'ajax',
url: '/Document/GetDocumentList/',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: '' // there is no root
},
pageParam: undefined,
startParam: undefined,
pageParam: undefined
},
root: {
children: []
},
autoLoad: false,
listeners: {
append: function (thisNode, newChildNode, index, eOpts) {
console.log(newChildNode.get('documentName')); // 'Test Document'
newChildNode.set('leaf', true);
newChildNode.set('text', newChildNode.get('documentName'));
// it does not add to tree panel.
}
}
});
after load data from server, and it call the append function well. but after that, nothing show up in tree panel.
What I am doing wrong? please advice me.
Thanks
[EDIT]
This is the model,
Ext.define("App.model.DocumentList_model", {
extend: "Ext.data.Model",
fields: [
'id','yourRefNo','documentName','documentFileName','updatedBy','updatedAt'
]
});
I'm fusing your code with a piece of working code of mine. Try see if this works:
Model:
Ext.define("App.model.DocumentList_model", {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'yourRefNo'},
{name: 'documentName' },
{name: 'documentFileName'},
{name: 'updatedBy'},
{name: 'updatedAt', convert: function(v) { return v;} }, // Notice you can do field conversion here
{name: 'leaf', type: 'boolean', defaultValue: false, persist: false},
],
proxy: {
type: 'ajax',
url: '/Document/GetDocumentList/',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'children'
},
},
});
Store:
Ext.define('App.store.DocumentList_store', {
extend: "Ext.data.TreeStore",
model: 'App.model.DocumentList_model',
root: {
text: 'Root',
id: null,
expanded: true
},
autoLoad: false,
});
JSON Response:
{
"success":true,
"children":[{
"id":1,
"yourRefNo":"A91273",
"documentName":"Test Document",
"documentFileName":"login_to_your_account-BLUE.jpg",
"updatedBy":"root root",
"updatedAt":"\/Date(1343012244000)\/",
"leaf":false
}]
}