如何获取绑定并过滤了viewModel.hasMany关系同步的商店?
我在extjs5中有两个网格面板。说第一个网格是组和第二个用户。我将组网格绑定到viewModel stores.groups。此组存储正在工作,并且还通过模型代理进行同步(模型绑定在viewModel中)。第二个网格通过bind:{groupsReference.selection.users}
绑定到同一个viewModel。绑定工作。在选择组时,将过滤用户。更改某些用户数据会将用户记录标记为脏。
问题:脏用户不再自动停止,我也无法弄清楚如何手动同步。如何让autoSynced在这里工作?如何触发手动同步?
除了hasMany / belongsTo关系之外,用户组的模型是相同的:
Ext.define('MyApp.model.Groups', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'groupname', type: 'auto' }
],
autoLoad: true,
autoSync: true,
proxy: {
type: 'rest',
url: '/api/groups',
reader: {
type: 'json',
rootProperty: 'data',
successProperty: 'success'
},
writer: {
type: 'json'
}
},
hasMany: {
model: 'MyApp.model.Users',
store:'MyApp.model.Users',
name: 'users',
foreignKey:'testId',
}
});
视图模型
Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
requires: ['MyApp.model.Groups','MyApp.model.Users'],
alias: 'viewmodel.main',
stores: {
groups: {
model: 'mfct.model.Experiment',
autoLoad:true,
autoSync:true
},
users: {
model: 'mfct.model.Variation',
autoLoad:true,
autoSync:true
}
}
});
答案 0 :(得分:0)
这是我的代码,它可能不是最好的方法,但至少它是有效的。希望这可以帮到你一点。
FabricOrder模型
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'
});
SizeInfo模型
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
}
}
});