我正在尝试在我的应用中引用一个商店,目的是在我的网格底部添加一个分页工具栏。在大多数示例中,我研究过商店是由变量引用的,例如:store:someStore。但是,通过我构建我的应用程序有点不同,并确实为商店创建了一个引用变量。我有 尝试分配一个id,但这不起作用。
这就是我所拥有的:
在我看来Grid.js:
Ext.define('myApp.view.user.Grid', {
extend: 'Ext.grid.Panel',
viewModel: {
type: 'user-grid'
},
bind: {
store: '{users}',
},
columns: {...},
//my paging tool bar
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: 'girdStore'
//store: {users} -> did not work
}],
...
});
在我的视图模型GridModel.js中:
Ext.define('myApp.view.user.GridModel', {
extend: 'Ext.app.ViewModel',
requires: [
'myApp.model.User'
],
stores: {
users: {
model: 'myApp.model.User',
storeId: 'gridStore',
autoLoad: true
}
},
formulas: {...}
});
当我尝试通过id'strestore'引用{users}商店时,我收到此错误:
Uncaught TypeError: Cannot read property 'on' of undefined
如果没有完全重构我的模型,最好的方法是什么?
答案 0 :(得分:0)
当您引用网格时,可以通过调用getStore
函数来获取商店。请参阅ExtJs 6.2.1 documentation。
var grid; // reference to your grid
var store = grid.getStore();
您可以在initComponent
中创建商店,然后将其附加到dockedItems
,这样两者都会共享同一商店。
initComponent: function () {
var store = Ext.create('Ext.data.Store', {
model: 'myApp.model.User',
storeId: 'gridStore',
autoLoad: true
});
this.store = store;
this.dockedItems = [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store:store
}];
this.callParent(arguments);
}
创建类的新实例时会调用initComponent
一次,请参阅description in the documentation。
......它的目的是由每个子类实现 Ext.Component提供任何所需的构造函数逻辑。该 首先调用正在创建的类的initComponent方法 每个initComponent方法的层次结构都是Ext.Component 之后打电话。这使得它易于实施,如果需要, 在任何步骤覆盖Component的构造函数逻辑 层次结构。 initComponent方法必须包含对callParent的调用 为了确保父类的'initComponent方法也是如此 称为...
具有initComponent
功能的视图。
Ext.define('myApp.view.user.Grid', {
extend: 'Ext.grid.Panel',
viewModel: {
type: 'user-grid'
},
initComponent: function () {
var store = Ext.create('Ext.data.Store', {
model: 'myApp.model.User',
storeId: 'gridStore',
autoLoad: true
});
this.store = store;
this.dockedItems = [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: store
}];
this.callParent(arguments);
},
columns: {...},
...
});