Custom Components with child items: it's possible to change child configs?

Question

I'm trying to see if creating a custom component with child elements it's a good approach. In most of my forms I will have some fields horizontally aligned, with the same size.

My first though was to create a custom FieldContainer and already declaring the items that I now that will exists, but I don't want to set his name's and id's in this extended class. I want to make the final class to responsible with that, and maybe more properties of the child items.

So, it's possible to define config's o child items in the class that will use my custom component?

Example

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

Just create custom properties for each of the items with a distinct attribute name and then apply any attributes you want when the component is actually configured and initted:

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

});