Пользовательские компоненты с дочерними элементами: можно ли изменить дочерние конфигурации?

Question

Я пытаюсь увидеть, если создание пользовательского компонента с дочерними элементами это хороший подход. В большинстве моих форм некоторые поля будут выровнены по горизонтали с одинаковым размером.

Сначала я хотел создать кастом FieldContainer и уже объявляет элементы, которые я теперь, которые будут существовать, но я не хочу устанавливать его имена и идентификаторы в этом расширенном классе. Я хочу сделать последний класс ответственным за это, и, возможно, больше свойств дочерних элементов.

Итак, возможно определить дочерние элементы конфигурации в классе, который будет использовать мой пользовательский компонент?

пример

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

});