Ext.define('record.SecurityCase', {
extend : 'Ext.data.Model',
fields : [{
name : 'id',
type : 'string',
persist : false
}, {
name : 'takeplaceTime',
type : 'date',
persist : true
}, {
name : 'brief',
type : 'string',
persist : true
}],
groupField: 'takeplaceTime'
});
A grid with store used model above.And I want it to be grouped with 'takeplaceTime'.for example:
obj.takeplaceTime='2013-10-01';obj2.takeplaceTime='2013-04-01';obj3.takeplaceTime='2013-12-01';obj4.takeplaceTime='2012-12-01';
obj;obj2;obj3 are one group as its year is 2013. obj4 will be another ,year 2012.
Is there a groupRenderFunction to handle this?
You can define calculated property in Model for grouping. Example:
Ext.define('Model1', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'seniority', type: 'string'},
{name: 'department', type: 'string'},
{name: 'group', type: 'string', convert: function(value, record) {
return record.get('name').substr(0, 1); // first letter of name
} }
]
});
Working sample in Ext JS 4.2: http://jsfiddle.net/BmVeg/1/
Related
How do i make a field as List of String elements while creating a Ext.data.Model in Ext js?
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int', convert: null},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
]
});
Just exclude the type:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'foo'}
]
});
var o = new User({
foo: ['a', 'b', 'c']
});
console.log(o.get('foo'));
I have the model:
Ext.define('EvaluateIt.model.Address', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'address', type: 'string'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'zipcode', type: 'string'},
{name: 'county', type: 'string'}
],
proxy: {
type: "sql",
database: 'Test'
}
}
});
In my controller, I insert data into this model as follows:
var address = Ext.create('EvaluateIt.model.Address', {
address: json[i].garden.address.address
});
address.save();
Where the json array is grabbed via Ajax and thus inserted into the model without any problems.
However, when I try to access the id from the model like,
console.log('address.id ' + address.id);
I get something of the form ext-record-n (where n does not even map to the id in my Address table). How can I reference the actual value of the id column in this table? I tried this, but was unsuccessful: https://github.com/tomalex0/SenchaTouch-v2-SqliteProxy/issues/3
Adding the id field to the fields array will cause the proxy to create the database table with column id as an AUTOINCREMENT field.
Ext.define('EvaluateIt.model.Address', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'address', type: 'string'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'zipcode', type: 'string'},
{name: 'county', type: 'string'}
],
proxy: {
type: "sql",
database: 'Test'
}
}
});
The proxy will read the id value created by the database. You can access the value by passing a callback function to the model save method.
var address = Ext.create('EvaluateIt.model.Address', {
address: json[i].garden.address.address
});
address.save(function(record) {
console.log('address.id ' + record.getId();
}, this);
I have a model and its id is type string. I load a record to display in grid but the id is show 'NaN'.
json
{"results":[{"id":"FT01","name":"area1","enable":true}],"total":1,"success":true}
model
Ext.define('YX.model.Area', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type : 'string' },
{ name : 'name', type : 'string' },
{ name : 'enable', type : 'boolean', defaultValue : true }
]
});
store
Ext.define('YX.store.AreaStore', {
extend : 'YX.store.ListStore',
model : 'YX.model.Area',
proxy : {
type : 'ajax',
url : 'area/list.do',
reader : Utils.ajax.gridReader
}
});
Utils.ajax.gridReader =
{
type : 'json',
root : 'results',
successProperty : 'success',
totalProperty : 'total'
}
If I set proxy.reader to a direct object then id is show correctly in grid.
proxy : {
type : 'ajax',
url : 'area/list.do',
reader : {
type : 'json',
root : 'results',
successProperty : 'success',
totalProperty : 'total'
}
}
That may depends on what you do with the model, and the type of storage that backs your data. In principle, there should not be such a restriction, but that may be an expectation of some part of the framework (or third-party code).
Anyway, I've written a minimal test case with your model and a grid, and the id string is displayed correctly. That means that you probably have an issue somewhere else in your code... Most probably the proxy, reader or store.
Here's the test code (running there):
Ext.define('Area', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'enable',
type: 'boolean',
defaultValue: true
}]
});
Ext.onReady(function() {
Ext.widget('grid', {
renderTo: Ext.getBody(),
height: 300,
columns: [
{dataIndex: 'id', text: "ID"},
{dataIndex: 'name', text: "Name"}
],
store: {
model: 'Area',
proxy: {
type: 'memory'
,data: [
{id: 'foo', name: "Foo"}
,{id: 'bar', name: "Bar"}
]
},
autoLoad: true
}
});
});
this error is because of your field name is "id".
default idProperty='id' field and idProperty field must have int data.but in your case it is not.
so this code is giving you this error.
if you won't need idProperty then chanege you field's name "id" to something else
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model-cfg-idProperty
If you want your ID to be a number, you can customize it using identifier.
This is how it worked for me. I added this code in my model:
identifier: {
type: 'sequential',
seed: 10
},
I just downloaded the final version of ExtJs 4 and I'm trying to implement some things using new Model approach.
For instance I have a model named SetupModel, it has 2 nested models Users, Reports.
I create new store and I set the Model property of the store = SetupModel.
The question is - how can I access my nested properties after data was loaded into the store?
I need something like myStore.data.Users(), but is incorrect.
Any thoughts?
When you define your model, you need to provide the necessary association with the nested models. Since, you have not provided your code. Here is an example:
My Product Model:
Product = Ext.define('Product',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'user_id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'price', type: 'float'}
],
proxy: {
type: 'localstorage',
id: 'products'
}
});
My User Model:
User = Ext.define('User',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'}
],
associations: [
{type: 'hasMany', model: 'Product', name: 'products'}
],
proxy: {
type: 'localstorage',
id : 'users'
}
});
Now, if you have a instance of User model with products. Here is how you can access the products:
var productStore = user.products();
Note that user.products() returns a Ext.data.Store. Now, you can traverse or filter or find your product record. Here is how I got my first product's name:
productStore.getAt(0).get('name');
I have a storage with models:
Ext.define('App.Supplier.Store', {
extend : 'Ext.data.Store',
constructor : function(config) {
Ext.regModel('Supplier', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'irn', type: 'string'}
],
hasMany : {model: 'SupplierContact', name: 'contacts', associationKey: 'contacts'}
});
Ext.regModel('SupplierContact', {
fields: [
{name: 'id', type: 'int'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'name', type: 'string'}
],
belongsTo: 'Supplier'
});
config = config || {};
config.model = 'Supplier';
config.proxy = {
type : 'ajax',
url : '/supplier/search/process',
reader : {
type : 'json',
root : 'data',
totalProperty : 'totalCount',
successProperty: 'success'
}
};
config.pageSize = 10;
config.remoteSort = true;
config.simpleSortMode = true;
// call the superclass's constructor
App.Supplier.Store.superclass.constructor.call(this, config);
}
});
I have a valid json from url and this code works fine:
var store = new App.Supplier.Store({storeId: 'supplierStore'});
store.load({
callback: function() {
var supplier = store.first();
console.log("Order ID: " + supplier.getId() + ", which contains items:");
supplier.contacts().each(function(contact) {
alert(contact.data.phone);
});
}
});
My grid:
Ext.define('App.Supplier.Grid', {
extend : 'Ext.grid.GridPanel',
alias : 'widget.supplierGrid',
cls : 'supplier-grid',
iconCls: 'icon-grid',
collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsible Grid',
height: 300,
buttonAlign:'center',
headers : [
{text : 'Id', dataIndex : 'id', width : 20},
{text : 'Name', dataIndex : 'name', flex : 4 },
{text : 'IRN', dataIndex : 'irn', flex : 3}
],
initComponent : function() {
this.store = new App.Supplier.Store({storeId: 'supplierStore'});
this.store.load();
this.callParent(arguments);
this.on('selectionchange', this.onRowSelect, this);
},
onRowSelect: function(sm, rs) {
if (rs.length) {
alert(sm.contacts); // undefined
alert(rm.contacts); // undefined
var info = this.getComponent('infoPanel');
info.updateDetail(rs[0].data);
}
}
});
How to get contacts in onRowSelect for selected row ?
PS: json from server:
{"totalCount":100,
"success":true,
"data":[{
"id":2,
"name":"department 0",
"irn":"123490345907346123-0",
"contacts":[{
"id":3,
"phone":"+7907 123 12 23",
"email":"test#localhost",
"name":"hh"
}, {
"id":4,
"phone":"+7832 123 12 23",
"email":"test2#localhost",
"name":"gtftyf"
}]
}]}
Can you provide your json as well? I think your json is not correct so that, ExtJS loads the relationships as well. In order to load the relationships as well, you will need to provide the contacts details in the returned json as well..
You should have something like this:
sucess: true,
totalCount: 10,
data: [{
id: 142,
name: 'xyz',
irn: 'test',
contacts: [{
id: 130,
email: 'xyz#site.com',
phone: 123445,
name: 'Supplier XYZ'
},{
id: 131,
email: 'test#site.com',
phone: 123445,
name: 'Supplier XYZ'
}]
}, ...
]
Update:
Json is correct! The problem lies with the way you access your data. If you look at the signature of selectionchange event, you will notice that the first is DataView and second is an array of selected records. So, in your case the rs is an array of the selected rows. You should be able to access it as rs[0].contacts.
Another way to access the selected records will be to use the DataView object. You can use the getSelectedRecords method to get the array of the selected records.