我正在尝试编写一个可重用的选项选择面板,在这个面板中,用户会看到一个网格和一个小文本框,他可以使用这个文本框来过滤网格中的内容,以便从网格中选择项目。目前,(简化后的)视图代码如下,已经能够正常工作。
Ext.define('MyApp.view.items.ItemSelectorPanel', {
extend: 'Ext.panel.Panel',
require: 'MyApp.view.items.SimpleItemGrid',
alias: 'widget.ItemSelectorPanel',
layout: 'form',
config: {
itemStore: false
},
constructor: function(config) {
this.initConfig(config);
this.superclass.constructor.call(this, config);
this.add([
{
fieldLabel: 'Filter',
name: 'filter'
},
{
xtype: 'SimpleItemGrid',
collapsible: true,
store: this.getItemStore()
}
]);
return this;
}
});
如您所见,ItemSelectorPanel
使用 config
属性来公开一个接口,调用方可以指定要使用哪个项目存储。
调用方(在此示例中,面板已添加到 TabPanel):
var panelToAdd = {
xtype: 'panel',
title: 'New Selection',
closable: true,
padding: 10,
items: [{
title: 'Select node',
xtype: 'ItemSelectorPanel',
itemStore: itemStore
}]
};
现在,我很喜欢 ExtJS 4 的声明式风格及其有助于遵循 MVC 模式的特性。我希望视图中的代码越少越好。不幸的是,这种方法行不通:
Ext.define('MyApp.view.items.ItemSelectorPanel', {
/* ... same as above ... */
constructor: function(config) {
this.initConfig(config);
this.superclass.constructor.call(this, config);
return this;
},
items: [
{
fieldLabel: 'Filter',
name: 'filter'
},
{
xtype: 'SimpleItemGrid',
collapsible: true,
store: this.getItemStore // <-- interesting part
}
]
});
有没有一种以声明方式通过父级属性的
config
属性来暴露嵌套/子组件的配置的方法?
Ext.Component
的 cloneConfig() 方法来复制组件的初始配置: http://docs.sencha.com/ext-js/4-2/#!/api/Ext.Component-method-cloneConfig - blong