ExtJS: Setting defaults to panel items for nested objects

Question

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.

instead of using `map` function you can directly [`defaults:{flex:1}`](https://docs.sencha.com/extjs/6.5.1/modern/Ext.Container.html#cfg-defaults) config for inner `fieldcontainer` that contain `foofield` and `barfield`. — Narendra Jadhav, Jul 04 '18 at 10:38
But I'm creating tons of that kind of nested `fieldcontainer`s and `items` . There fore trying to avoid DRY and figure out some other useful approach. — Nuri Engin, Jul 04 '18 at 10:45
so there is one more useful approach you can create custom component and you can use once to it will more easy — Narendra Jadhav, Jul 04 '18 at 10:46
dear @NarendraJadhav just the thing! Even I've official release of Sencha SDK; `Ext.form.FieldContainer` is not in SDK source!? Why is that? I've stated `extend: 'Ext.form.FieldContainer'` but can not find declaration and throws error; `[ERR] Failed to resolve dependency Ext.form.FieldContainer for file` — Nuri Engin, Jul 04 '18 at 11:31
@NarendraJadhav solved. Toolkit related issue! I've created the file/class under `app` folder and after moving the file/class to `classic` folder solved. — Nuri Engin, Jul 04 '18 at 11:51

score 2 · Answer 1 · answered Jul 04 '18 at 10:38

2

Defaults are defined using the defaults config on containers:

xtype: 'fieldcontainer',
layout: 'hbox',
defaults: {
    flex: 1
},
items: [
    {
        xtype: 'foofield',
    },
    {
        xtype: 'barfield',
    }

To cover nested containers, you can nest multiple defaults configs inside each other:

defaults: {
    defaults: {
        flex: 1
    },
    flex: 1
}

Please note that an xtype config as part of the defaults object can lead to undesired results, and that you should use the defaultType config to define the default type of child elements of a container.

answered Jul 04 '18 at 10:38

Alexander

19,906
19
75
162

I've always used `xtype` inside `defaults` and didn't have any problems so far. Can you think of a case where there are issues regarding using this approach? – scebotari66 Jul 04 '18 at 13:34
1

@scebotari66 Yes, I had issues with that in 2014/2015, but I don't remember the details. Only that Sencha Support told me to use `defaultType` instead which then fixed the issue. – Alexander Jul 04 '18 at 13:47
You answer helped me. Can I please ask you what the propery 'flex' means? Perhaps you have some example? – FrenkyB Dec 26 '21 at 16:54
@FrenkyB Have you read [the documentation](https://docs.sencha.com/extjs/6.6.0/classic/Ext.Component.html#cfg-flex)? If you have inside a `hbox` layout three components with `flex: 1`, `flex: .5` and `flex: 3`, then the first component will be twice as wide as the second and the third is three times as wide as the first (= six times as wide as the second). – Alexander Dec 29 '21 at 14:31

score 1 · Accepted Answer · answered Jul 04 '18 at 11:15

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'
                        }
                     ]
             },

ExtJS: Setting defaults to panel items for nested objects

2 Answers2

Linked