[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法，动态创建并加载组件
最后更新于：2022-04-01 07:37:12
本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39226773](http://blog.csdn.net/sushengmiyan/article/details/39226773)
官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each)
本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan)
------------------------------------------------------------------------------------------------------------------------------------
上一节看到了如何使用fieldset集合来管理组件，其中fieldset中的每一个组件都是在items中指定的，如下：
可以看到，items其实就是一个数组，可以看成是json格式样式的一个数组。既然这样，那么当我们定义好了这样的字符串样式之后，可以使用数组的push方法，将这些项，一个一个的加载进去，就可以动态的进行组件创建了。
先看一下效果，右边的fieldset是动态创建出来的，是通过array的push方法加载的：
代码如下：
~~~
Ext.define(
'fieldsettest.view.form.BaseForm',
{
extend: 'Ext.form.Panel',
alias: 'widget.baseform',
title: '带fieldSet的formpanel',
frame: true,
bodyStyle: 'padding:5px 5px 0',
items: [],
initComponent: function(){
var me = this;
var obj = [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}]
},{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 2',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}]
}];
Ext.each(obj, function(field, indext){
me.items.push(field);
});
this.callParent(arguments);
}
}
);
~~~