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

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

Answer 1

首先是一般性

切勿在类定义中的函数之外添加对象，除非您确切知道自己要做什么。因为如果您这样做，所有实例都将共享该对象的 same 实例。我想我不需要提及这会导致...

如果你需要在其中放置一个对象，你应该在构造函数中克隆它。

到你的代码

我不知道this.initConfig(config); 做了什么，但config 变量不是您的类中的变量，而是构造函数参数中的变量。我建议您也使用initComponent() 进行初始化而不是constructor()，除非您明确需要使用构造函数，而在您的情况下您似乎没有。

此外，“配置”没有被转发，因为它没有被执行向上->底部但底部->向上执行配置，并且所有其他属性（已经）被继承。

我仍然不完全知道你的目标是什么，因此我不能给你任何建议你应该如何做到这一点，但我可以肯定地说，你这样做的方式会导致问题。

编辑

我仍然不确定我是否完全了解您的需求，但以下应该可以工作（如果您也需要侦听器，您可以查看 Ext.util.Bindable mixin）

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

Answer 2

不，您不能按照您描述的方式进行操作。原因很简单，我们举个例子：

Ext.define('MyClass', {
    someProp: this.foo(),

    foo: function(){
        return bar;
    }
});

在这里，我们调用define() 方法，并将一个对象作为配置传递给它。因此，整个对象（包括对 foo() 的调用）在它被传递给定义之前就被评估了，所以类/方法在那个时候甚至不存在。

即使您可以这样做，这也是 foo 是类上的实例方法的复杂性，但您尝试调用它的方式就好像它是一个静态方法。

所以，答案是，您需要使用某种方法来执行此操作，initComponent 通常比构造函数更受欢迎。

Answer 3

您可以在类的声明中定义项目，但不能在声明时从您的类中调用任何方法。为了解决这个问题，只定义没有 store 的项目，然后使用 initComponent 方法为您的视图设置 store。

Answer 4

我没有看到解决原始问题的答案。这是我发现的工作......

创建一个 myClass 的实例，传入一个值为 'bar' 的配置 'foo'

var myClassInstance = Ext.create('MyApp.view.myClass', {
    foo: 'bar'
});

myClass 定义如下：

Ext.define('MyApp.view.myClass', {
extend: 'Ext.container.Container',
alias: 'widget.myclass',

config: {
    foo: 'defaultVal'
},

constructor: function(configs) {
    this.callParent(arguments);  //create class, calls initComponent

    var try1 = getFoo(); //try1 is 'defaultVal'
    this.initConfig(configs);  //initializes configs passed in constructor
    var try2 = getFoo(); //try2 is 'bar' 
},

initComponent: function() {
    //myClass declaration here ...

    this.callParent();
}