ExtJS：为嵌套对象设置默认面板项答案

【问题标题】：ExtJS: Setting defaults to panel items for nested objectsExtJS：为嵌套对象设置默认面板项
【发布时间】：2018-12-12 18:02:53
【问题描述】：

这个问题是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。我只需要为嵌套的items 定义flex 配置，它具有foofield 和barfield。

【问题讨论】：

不使用map函数，你可以直接defaults:{flex:1}为包含foofield和barfield的内部fieldcontainer配置。
但我正在创建大量这种嵌套的 fieldcontainers 和 items 。因此试图避免 DRY 并找出其他有用的方法。
所以有一种更有用的方法可以创建自定义组件，并且使用一次会更容易
亲爱的@NarendraJadhav 就是这样！即使我已经正式发布了 Sencha SDK； Ext.form.FieldContainer 不在 SDK 源代码中！？这是为什么？我已经声明了extend: 'Ext.form.FieldContainer'，但找不到声明并抛出错误； [ERR] Failed to resolve dependency Ext.form.FieldContainer for file
您使用的是哪个版本的 extjs？

标签： javascript arrays object extjs defaults

【解决方案1】：

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

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

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

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

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

【讨论】：

我一直在defaults 中使用xtype，到目前为止没有任何问题。您能想到使用这种方法存在问题的案例吗？
@scebotari66 是的，我在 2014/2015 年遇到了问题，但我不记得细节了。只有 Sencha 支持告诉我改用 defaultType，然后解决了这个问题。
你的回答帮助了我。我可以问你属性'flex'是什么意思吗？也许你有一些例子？
@FrenkyB 你读过the documentation 吗？如果您在hbox 布局内有三个组件，分别是flex: 1、flex: .5 和flex: 3，那么第一个组件的宽度将是第二个组件的两倍，第三个组件的宽度是第一个组件的三倍（= 6是第二个的两倍）。

【解决方案2】：

通过@NarendraJadhav 的意见；创建了我自己的结构...

定义；

Ext.define('MyApp.BaseFldCon', {
    extend: 'Ext.form.FieldContainer',
    xtype: 'basefldcon'
});

Ext.define('MyApp.VBoxFldCon', {
    extend: 'MyApp.BaseFldCon',
    xtype: 'vboxfldcon',
    layout: {
        type: 'vbox',
        align: 'stretch',
        pack: 'start'
    }
});

Ext.define('MyApp.HBoxFldCon', {
    extend: 'MyApp.BaseFldCon',
    xtype: 'hboxfldcon',
    layout: {
        type: 'hbox'
    },
    defaults: {
        flex: 1
    }
});

实施；

{
   xtype: 'vboxfldcon',
   items: [
            {
              xtype: 'hboxfldcon',
              items: [
                       {
                           xtype: 'foofield',
                        },
                        {
                           xtype: 'barfield'
                        },
                        {
                           xtype: 'foocombo'
                        }
                     ]
             },

【讨论】：