[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法，动态创建并加载组件

本文主要是介绍[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法，动态创建并加载组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文地址：http://blog.csdn.net/sushengmiyan/article/details/39226773

官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push

本文作者：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 buttonxtype:'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 buttonxtype:'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);}});

这篇关于[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法，动态创建并加载组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---