javascriptarraysobjectextjsdefaults

ExtJS: Setting defaults to panel items for nested objects


This question is part of How to set defaults for Grid columns within initComponent and posted here independently through @scebotari66 advice on main post.

As you'll notice below; there is Ext.Array.map to define defaults for related function.

// 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
                            }

The thing is this implementation is works as expected but on this situation I'm creating a fieldcontainer object which is include all other things and items inside. And Array.map sets flex config only to first fieldcontainer obj. I need to define flex config only for nested items which has foofield and barfield.


Solution

  • Through @NarendraJadhav 's opinion; created my own structure...

    Definition;

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

    Implementation;

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