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

});

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

实施例

1 个答案: