带有子项的自定义组件：可以更改子配置吗？

Question

我正在尝试使用子元素创建自定义组件是否是一种好方法。在我的大多数表单中，我都会有一些字段水平对齐，大小相同。

我的第一个想法是创建一个自定义 FieldContainer 并且已经声明了我现在将存在的项目，但我不想在这个扩展类中设置他的名字和 ID。我想让最终类负责，也许还有子项的更多属性。

那么，是否可以在将使用我的自定义组件的类中定义 config 的子项？

示例

Ext.define('MyApp.view.LookupContainer', {
    extend: 'Ext.form.FieldContainer',

    layout: {
        type: 'column'
    },
    labelAlign: 'right',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'numberfield',
                    columnWidth: 0.15,
                    width: 70,
                    labelWidth: 0,
                    maxValue: 99999,
                    minValue: 0
                },
                {
                    xtype: 'textfield',
                    columnWidth: 0.75,
                    margin: '0 0 0 5',
                    readOnly: true
                },
                {
                    xtype: 'button',
                    cls: 'x-formButton',
                    margin: '0 0 0 5',
                    overCls: 'x-formButtonOver',
                    iconCls: 'icon-lov'
                },
                {
                    xtype: 'button',
                    margin: '0 0 0 5',
                    iconCls: 'icon-program'
                }
            ]
        });

        me.callParent(arguments);
    }

});

Ext.onReady(function() {
  var container = Ext.create('MyApp.view.LookupContainer');
  //how to set the items properties here?
});

Answer 1

只需为每个具有不同属性名称的项目创建自定义属性，然后在实际配置和初始化组件时应用您想要的任何属性：

Ext.define('MyApp.view.LookupContainer', {
    extend: 'Ext.form.FieldContainer',

    theNumberField: null,
    theTextField: null,
    theButton1: null,
    theButton2: null,

    layout: {
        type: 'column'
    },
    labelAlign: 'right',

    initComponent: function() {
        var me = this;

        var formNumberField = Ext.apply(
            {
                xtype: 'numberfield',
                columnWidth: 0.15,
                width: 70,
                labelWidth: 0,
                maxValue: 99999,
                minValue: 0
            }, me.theNumberField || {});

        var formTextField = Ext.apply(
            {
                xtype: 'textfield',
                columnWidth: 0.75,
                margin: '0 0 0 5',
                readOnly: true
            }, me.theTextField || {});

        var formButton1 = Ext.apply(
            {
                xtype: 'button',
                cls: 'x-formButton',
                margin: '0 0 0 5',
                overCls: 'x-formButtonOver',
                iconCls: 'icon-lov'
            }, me.theButton1 || {});

        var formButton2 = Ext.apply(
            {
                xtype: 'button',
                margin: '0 0 0 5',
                iconCls: 'icon-program'
            }, me.theButton2 || {});

        Ext.applyIf(me, {
            items: [
                formNumberField,
                formTextField,
                formButton1,
                formButton2
            ]
        });

        me.callParent(arguments);
    }

});