javascript - ExtJS:设置嵌套对象的面板项目的默认值

Question

此问题是 How to set defaults for Grid columns within initComponent 的一部分并通过@scebotari66 对主帖的建议独立发布在这里。

正如您在下面会注意到的那样；有Ext.Array.map来定义相关功能的defaults。

// Statment
    initComponent: function () {
    var me = this;
    me.items = Ext.Array.merge(
        me.getFormSt(),
        Ext.Array.map(me.getForm(), function (listFldConfig) { //Aim to using the array map function to set flex property for subset fields
            listFldConfig.flex = 1;
            return listFldConfig;
        }),
        me.getFormEnd()
    );
    me.callParent(arguments)
},

// Implementation
getForm: function () {
        var me = this;
        var form = [
            { // Array.map func. sets `flex` to this obj.
                xtype: 'fieldcontainer',
                layout: { type: 'vbox', align: 'stretch', pack: 'start' },
                items: [
                    {
                        xtype: 'fieldcontainer',
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'foofield',
                                //flex: 1 //But I need to set `flex` as default for this obj. in nested items array
                            },
                            {
                                xtype: 'barfield',
                                //flex: 1 //But I need to set `flex` as default for this obj. in nested items array
                            }

问题是这个实现按预期工作，但在这种情况下，我正在创建一个 fieldcontainer 对象，其中包含所有其他事物和项目。并且 Array.map 将 flex 配置仅设置为第一个 fieldcontainer obj。我需要仅为具有 foofield 和 barfield 的嵌套 items 定义 flex 配置。

Answer 1

默认值是使用 defaults 定义的容器上的配置:

xtype: 'fieldcontainer',
layout: 'hbox',
defaults: {
    flex: 1
},
items: [
    {
        xtype: 'foofield',
    },
    {
        xtype: 'barfield',
    }

要覆盖嵌套容器，您可以将多个 defaults 配置相互嵌套:

defaults: {
    defaults: {
        flex: 1
    },
    flex: 1
}

请注意，作为 defaults 对象一部分的 xtype 配置可能会导致不良结果，因此您应该使用 defaultType config 来定义容器子元素的默认类型。