Ext.js5（关联数据插件）（SubTable）(23)

/**
* This example uses the `Ext.grid.plugin.SubTable` plugin to display associated records
* 使用Ext.grid.plugin.SubTable插件来显示关联数据
* in tabular form below grid rows. The plugin is configured with an `association` property
* which specifies which associated record collection to display and a `columns` property
* specifying which fields from the associated records should be displayed.
*/
Ext.define('KitchenSink.view.grid.CustomerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.customer-grid',

requires: [
'Ext.ux.grid.SubTable',
'KitchenSink.model.Order',
'KitchenSink.model.Customer'
],

title: 'Customers',
width: 700,
height: 400,

constructor: function(config) {
config = Ext.apply({
plugins: {
ptype: "subtable",
association: 'orders',// 指定记录集合和列属性
headerWidth: 24,
columns: [{
text: 'Order Id',
dataIndex: 'id',
width: 100
},{
xtype: 'datecolumn',
format: 'Y-m-d',
width: 120,
text: 'Date',
dataIndex: 'date'
}]
}
}, config);
this.callParent([config]);
},

initComponent: function() {
Ext.apply(this, {
store: {
autoLoad: true,
proxy: {
type: 'memory',
data: [{
"id": 1,
"name": "Bread Barn",
"phone": "8436-365-256",
"orders": [{
"id": 1,
"date": "2010-08-13",
"customerId": 1
}, {
"id": 2,
"date": "2010-07-14",
"customerId": 1
}]
}, {
"id": 2,
"name": "Icecream Island",
"phone": "8452-389-719",
"orders": [{
"id": 3,
"date": "2010-01-22",
"customerId": 2
}, {
"id": 4,
"date": "2010-11-06",
"customerId": 2
}]
}, {
"id": 3,
"name": "Pizza Palace",
"phone": "9378-255-743",
"orders": [{
"id": 5,
"date": "2010-12-29",
"customerId": 3
}, {
"id": 6,
"date": "2010-03-03",
"customerId": 3
}]
}]
},
model: 'KitchenSink.model.Customer'
},
columns: [{
text: 'Id',
dataIndex: 'id'
},{
text: 'Name',
dataIndex: 'name',
flex: 1,
hideable: false
}, {
width: 140,
text: 'Phone',
dataIndex: 'phone'
}]
});
this.callParent();
}
});

Ext.define('KitchenSink.model.Order', {
extend: 'KitchenSink.model.Base',

fields: [
{ name: 'date', type: 'date', dateFormat: 'Y-m-d' },
'shipped',
{
name: 'customerId',
reference: {
parent: 'Customer'
}
}
],

proxy: {
type: 'rest',
url: '/KitchenSink/Order'
}
});

Ext.define('KitchenSink.model.Customer', {
extend: 'KitchenSink.model.Base',
requires: [
"KitchenSink.model.field.PhoneNumber"
],

fields: [
'name',
{ name: 'phone', type: 'phonenumber' }
],

proxy: {
type: 'rest',
url: '/KitchenSink/Customer'
},

validators: {
name: 'presence'
}
});