Extjs adding a idproperty to fields defined in a store - extjs

I'm setting my fields directly in the store configuration.
Ext.define('T.store.Users', {
extend: 'Ext.data.Store',
autoLoad: false,
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
Is it possible to set somehow an idProperty for these fields direct in the store ? The only option I see is to create a separate model class containing a idProperty. But I'd like to avoid this.

The default id Property is id. You can change it either on the model or the reader of the proxy.
Note: the store can use the proxy of the model (not done in this example).
Example (with both)
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users',
idProperty: 'Id'
}
},
autoLoad: true
});

You can theoretically change the idProperty from within the constructor this way:
Ext.define('T.store.Users', {
extend: 'Ext.data.Store',
autoLoad: false,
constructor: function(){
this.callParent(arguments);
this.model.prototype.idProperty = 'Id';
},
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});

For ExtJS 6
Ext.define(null, {
override: 'Ext.data.ProxyStore',
/**
* #cfg {String} idProperty
*/
// idProperty: null,
privates: {
createImplicitModel: function(fields) {
var me = this,
modelCfg = {
extend: me.implicitModel,
statics: {
defaultProxy: 'memory'
}
},
proxy, model;
if (fields) {
modelCfg.fields = fields;
}
// add
if(me.idProperty) {
modelCfg.idProperty = me.idProperty;
}
model = Ext.define(null, modelCfg);
me.setModel(model);
proxy = me.getProxy();
if (proxy) {
model.setProxy(proxy);
} else {
me.setProxy(model.getProxy());
}
}
}
});
Example
Ext.define('T.store.Users', {
extend: 'Ext.data.Store',
autoLoad: false,
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
Test
var store = Ext.create('T.store.Users');
console.log(store.model.idProperty); // "Id"
console.log(store.model.idField); // constructor {name: "Id", type: "int"..}
store.add({Id: '11', Name: 'XXX'})

Related

Sencha Touch: reference not generated

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('-------------------------------');
}
})
});
}
});

ExtJS TreeStore is empty if I load store by manually

Model
Ext.define('MyDesktop.model.mail.MailFoldersModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String'
],
fields: [
{
type: 'string',
name: 'id'
},
{
type: 'string',
name: 'idParent'
},
{
type: 'string',
name: 'text'
}
]
});
My TreeStore
Ext.define('MyDesktop.store.mail.MailFoldersStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyDesktop.model.mail.MailFoldersModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MailFoldersStore',
model: 'MyDesktop.model.mail.MailFoldersModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://url/mail/folders',
reader: {
type: 'json',
rootProperty: 'items',
successProperty: 'success'
}
},
root: {
text: 'root',
iconCls: 'mail-folders-owner'
}
}, cfg)]);
}
});
Store is autoloaded, all works correctly, store contains 11 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
If I set autoLoad to false and trying to load by manually - store is empty, 0 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
MailFoldersStore.load({
callback : function(records, operation, success) {
console.log(records);
}
});
What can be a reason for this behaviour?
I also has same problem. I am using Extjs 5.1. After googling I found one complex solution which needs us to modify the framework.
See the below link if it can help you.
http://www.sencha.com/forum/showthread.php?154823-listeners-quot-exception-quot-in-proxy.ajax-on-TreeStore-do-not-work

Does Extjs Combobox work with store filters?

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.

Grid showing empty rows extjs

Here, store loads data from databse(firebug shows) but all rows are empty...Please help.I cant find the reason behind...
Store
autoLoad: true,
model: 'CustomerService.model.OrderModel',
idProperty: 'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'quantity',
type: 'int'
}, {
name: 'receivedquantity',
type: 'int'
}],
proxy: {
type: 'ajax',
url: 'data/Getall.php',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
Here is Model:
Ext.define('CustomerService.model.OrderModel', {
extend: 'Ext.data.Model'
});
here is view:
Ext.define('CustomerService.view.customer.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.mylist',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false
}),
store: 'OrderStore',
forceFit: true, //Fit to container:: columnLines:true, height:132, width:200, autoResizeColumns:true, initComponent:function(){
this.columns = [{
header: 'name',
dataIndex: 'name'
}, {
header: 'Quantity',
dataIndex: 'quantity',
}, {
header: 'Received Quantity',
dataIndex: 'receivedquantity'
}];
this.callParent(arguments);
}
});
If your using a model in your store you should define the fields in your model instead of defining them in your store.
Ext.define('CustomerService.model.OrderModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'quantity',
type: 'int'
}, {
name: 'receivedquantity',
type: 'int'
}],
});
Ext.data.Store fileds:
This may be used in place of specifying a model configuration. The
fields should be a set of Ext.data.Field configuration objects. The
store will automatically create a Ext.data.Model with these fields. In
general this configuration option should only be used for simple
stores like a two-field store of ComboBox. For anything more
complicated, such as specifying a particular id property or
associations, a Ext.data.Model should be defined and specified for the
model config.

sencha touch 2: list population with associations in model

as a learning project for sencha-touch2 i'm trying to populate a store with data from https://www.hnsearch.com/api
i have created the model and store as follow and in the inspector view i can see that data is received and correctly mapped.
the problem i cannot figure out is, how to show a sencha xtype:list element with the actual result items nested in the json (Model: SearchResultItem). i tried the following, which will give me a list with ONE list item with the results in it, but i would like to have a list item for each search result.
models:
Ext.define('senchaHackerNews.model.Search', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'hits',
type: 'int'
}],
associations: {
type: 'hasMany',
name: 'results',
model: 'senchaHackerNews.model.SearchResults',
associationKey: 'results'
}
}
});
Ext.define('senchaHackerNews.model.SearchResults', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'score',
type: 'float'
}],
associations: {
type: 'hasOne',
name: 'item',
model: 'senchaHackerNews.model.SearchResultItem',
associationKey: 'item'
}
}
});
Ext.define('senchaHackerNews.model.SearchResultItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'username',
type: 'string'
}, {
name: 'title',
type: 'string'
}, {
name: 'points',
type: 'int'
}, {
name: 'url',
type: 'string'
}, {
name: 'domain',
type: 'string'
}]
}
});
store:
Ext.define('senchaHackerNews.store.Search', {
extend: 'Ext.data.Store',
requires: ['senchaHackerNews.model.Search'],
config: {
storeId: 'hnSearchStore',
model: 'senchaHackerNews.model.Search',
autoload: false,
proxy: {
type: 'jsonp',
// url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q=ipad',
reader: {
type: 'json',
rootProperty: ''
},
callbackKey: 'callback'
}
}
});
view:
Ext.define('senchaHackerNews.view.Search', {
extend: 'Ext.navigation.View',
alias: 'widget.hnSearch',
xtype: 'hnSearch',
requires: ['Ext.field.Search'],
initialize: function() {
var xtpl = new Ext.XTemplate('<tpl for="results">{item.username} ---- {item.title} | <br></tpl>');
this.add([
{
xtype: 'container',
title: 'Search HN',
layout: 'vbox',
items: [{
xtype: 'searchfield',
placeHolder: 'Search HN News (at least 3 chars)',
listeners: {
scope: this,
clearicontap: this.onSearchClearIconTap,
keyup: this.onSearchKeyUp
}
}, {
xtype: 'list',
flex: 1,
itemTpl: xtpl,
store: 'hnSearchStore',
emptyText: 'No Matching Items',
}]
}
]);
this.callParent(arguments);
},
onSearchKeyUp: function(field) {
if(field.getValue() != '' && field.getValue().length > 3) {
var store = Ext.StoreMgr.get('hnSearchStore');
store.setProxy({
url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q='+field.getValue()
});
store.load();
} else if(field.getValue() == '') {
Ext.StoreMgr.get('hnSearchStore').removeAll();
}
},
onSearchClearIconTap: function() {
Ext.StoreMgr.get('hnSearchStore').removeAll();
}
});
Example JSON is here http://api.thriftdb.com/api.hnsearch.com/items/_search?q=facebook&pretty_print=true
AFAIK if you are looking for array of items to be displayed the you should use items model in store and rootProperty pointing to item so
Ext.define('senchaHackerNews.store.Search', {
extend: 'Ext.data.Store',
requires: ['senchaHackerNews.model.SearchResults'],
config: {
storeId: 'hnSearchStore',
model: 'senchaHackerNews.model.SearchResults',
autoload: false,
proxy: {
type: 'jsonp',
// url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q=ipad',
reader: {
type: 'json',
rootProperty: 'results'
},
callbackKey: 'callback'
}
}
});
Note the change in model & rootProperty attribute

Resources