在ExtJS组件中,如何将config:{}项转发到子组件

Question

我正在尝试编写一个可重复使用的项目选择面板,其中用户具有可以从中选择的项目的网格以及可用于过滤网格内容的小文本字段.现在,(简化的)视图代码看起来像这样并且有效.

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
            }
    ]
});

有没有办法以声明方式通过configparent属性的属性公开嵌套/子组件的配置？

Answer 1

首先是一般的东西

除非您确切知道要执行的操作,否则切勿在类定义中的函数外添加对象.因为如果这样做,所有实例将共享该对象的同一实例.我想我不需要提到这会导致...

如果您需要在那里放置一个对象,则应该在构造函数中克隆它.

给你的代码

我不知道什么this.initConfig(config);,但config变量不是你的类中的变量,它是构造函数参数中的变量.我建议您也使用initComponent()初始化而不是constructor()除非您已经定义了使用构造函数的需要,在您的情况下您似乎没有.

此外,'config'不会被转发,因为它不会被执行 - > bottom但是bottom-> up,其中一个配置得到提升,所有其他属性(已经)继承.

我仍然不知道你的目标是什么,因此我不能给你任何建议你应该怎么做但我可以肯定地说你这样做会导致问题.

编辑

我仍然不确定我是否完全理解你的需求,但以下内容应该有效(如果你也需要听众,你可以看看Ext.util.Bindablemixin)

Ext.define('MyApp.view.items.ItemSelectorPanel', {
    extend: 'Ext.panel.Panel',
    require: 'MyApp.view.items.SimpleItemGrid',
    alias: 'widget.ItemSelectorPanel',
    layout: 'form',

    initComponent: function() {
        // Initialize the store (might be a instance or a storeId)
        var store;
        if (this.itemStore) {
            store = Ext.data.StoreManager.lookup(store);
        }
        this.itemStore = store || null;
        // Add is not valid (at least not before the parent inits are executed)
        this.items = [{
            fieldLabel: 'Filter',
            name: 'filter'
        }, {
            xtype: 'SimpleItemGrid',
            collapsible: true,
            store: this.getItemStore()
        }];

        this.callParent(arguments);
    },

    getItemStore: function() {
        return this.itemStore;
    }
});