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
.
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.
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'
}
]
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.