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