[英]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. 这个问题是如何为initComponent中的Grid列设置默认值的一部分,并通过主帖子上的@ scebotari66建议独立发布在此处。
As you'll notice below; 您将在下面注意到; there is
Ext.Array.map
to define defaults
for related function. 有
Ext.Array.map
来定义相关功能的defaults
。
// 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. 事情是该实现可以按预期工作,但是在这种情况下,我正在创建一个
fieldcontainer
对象,其中包含所有其他内容。 And Array.map
sets flex
config only to first fieldcontainer
obj. 并且
Array.map
仅将flex
config设置为第一个fieldcontainer
obj。 I need to define flex
config only for nested items
which has foofield
and barfield
. 我只需要为具有
foofield
和barfield
嵌套items
定义flex
config。
Defaults are defined using the defaults
config on containers: 使用容器上的
defaults
配置定义defaults
:
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: {
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. 请注意,作为
defaults
对象一部分的xtype
配置可能会导致不希望的结果,并且您应该使用defaultType
配置来定义容器子元素的默认类型。
Through @NarendraJadhav 's opinion; 通过@NarendraJadhav的意见; 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'
}
]
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.