这是我的代码,它可能不是最好的方法,但至少它是有效的。希望这可以帮助你一点。
面料订单模型
Ext.define('MyApp.model.FabricOrder', {
extend: 'Ext.data.Model',
requires: [
'MyApp.model.SizeInfo'
],
fields: [
{name: '_id', type: 'string'},
{name: 'styleno', type: 'string'},
{name: 'modelname', type: 'string'},
{name: 'colour', type: 'string'},
{name: 'contractno', type: 'string'},
{name: 'total', type: 'int'},
{name: 'deliverydate', type: 'date', dateFormat: 'Y-m-d'},
{name: 'comment', type: 'string'}
],
hasMany: [{
model: 'MyApp.model.SizeInfo',
name: 'sizes'
// This is not working in Extjs 5.0.0
//storeConfig: {
// autoSync: true,
// proxy: {//etc.}
//}
}],
idProperty: '_id'
});
尺寸信息模型
Ext.define('MyApp.model.SizeInfo', {
extend: 'Ext.data.Model',
fields: [
{name: 'size', type: 'string'},
{name: 'amount', type: 'int'}
]
});
视图模型
Ext.define('MyApp.view.fabric.FabricModel', {
extend: 'Ext.app.ViewModel',
requires: [
'MyApp.model.FabricOrder'
],
alias: 'viewmodel.fabric',
data: {
},
stores: {
fabricOrders: {
model: 'MyApp.model.FabricOrder',
pageSize: 20,
proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
},
api: {
create: '/createFabricOrder',
read: '/loadFabricOrder',
update: '/updateFabricOrder',
destroy: '/deleteFabricOrder'
},
reader: {
type: 'json',
rootProperty: 'fabricorders',
totalProperty: 'total'
}
},
autoSync: true,
autoLoad: {start: 0, limit: 20},
onCreateRecords: function(records, operation, success) {
console.log(records);
},
onUpdateRecords: function(records, operation, success) {
// If update failed, reject all changes
if(!success) {
// Call rejectChanges method of the store
this.rejectChanges();
Ext.Msg.show({
title: 'Update Failed',
message: 'The changes you have made are rejected.',
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
},
onDestroyRecords: function(records, operation, success) {
console.log(records);
}
},
sizeInfos: {
model: 'MyApp.model.SizeInfo',
proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
},
api: {
create: '/createFabricOrder',
read: '/loadFabricOrder',
update: '/updateFabricOrder',
destroy: '/deleteFabricOrder'
},
reader: {
type: 'json',
rootProperty: 'fabricorders'
}
},
autoLoad: false,
autoSync: false,
onCreateRecords: function(records, operation, success) {
console.log(records);
},
onUpdateRecords: function(records, operation, success) {
// If update failed, reject all changes
if(!success) {
// Call rejectChanges method of the store
this.rejectChanges();
Ext.Msg.show({
title: 'Update Failed',
message: 'The changes you have made are rejected.',
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
},
onDestroyRecords: function(records, operation, success) {
console.log(records);
}
}
}
});
视图控制器
Ext.define('MyApp.view.fabric.FabricController', {
extend: 'Ext.app.ViewController',
alias: 'controller.fabric',
id: 'fabricController',
init: function() {
this.control({
'grid[name=fabricgrid]': {
},
'grid[name=sizegrid]': {
reconfigure: 'onSizeGridReconfigure'
}
});
},
onSizeGridReconfigure: function(gird, store, columns, oldStore, oldColumns, eOpts) {
if(store) {
// Override the default association store settings
store.autoSync = true;
store.proxy = this.getViewModel().getStore('sizeInfos').getProxy();
store.onCreateRecords = this.getViewModel().getStore('sizeInfos').onDestroyRecords
store.onUpdateRecords = this.getViewModel().getStore('sizeInfos').onUpdateRecords;
store.onDestroyRecords = this.getViewModel().getStore('sizeInfos').onDestroyRecords
}
}
});