如何在extjs4 grid selectionchange事件中获取具有多个关系的子项数据
我有一个带有以下型号的存储器:如何在extjs4 grid selectionchange事件中获取具有多个关系的子项数据,extjs,Extjs,我有一个带有以下型号的存储器: Ext.define('App.Supplier.Store', { extend : 'Ext.data.Store', constructor : function(config) { Ext.regModel('Supplier', { fields: [ {name: 'id', type: 'int'}, {name: 'name
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);
}
});
我有一个来自url的有效json,该代码运行良好:
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);
});
}
});
我的网格:
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);
}
}
});
如何在onRowSelect中获取选定行的联系人
PS:json来自服务器:
{"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"
}]
}]}
您也可以提供json吗?我认为您的json不正确,因此ExtJS也会加载这些关系。为了加载关系,还需要在返回的json中提供联系人详细信息 你应该有这样的东西:
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'
}]
}, ...
]
更新:
Json是正确的!问题在于您访问数据的方式。如果查看selectionchange
事件的签名,您会注意到第一个是DataView,第二个是所选记录的数组。所以,在您的例子中,rs是一个选定行的数组。您应该能够以rs[0]的身份访问它。联系人
访问所选记录的另一种方法是使用DataView对象。您可以使用
getSelectedRecords
方法获取所选记录的数组。是的,json格式良好,我可以通过他的加载回调直接从存储中获取联系人,但不能在网格回调中。因为,json很好。。问题是如何访问数据。。请参阅更新的答案。