[ExtJS5學習筆記]第二十節 Extjs5配合數組的push方法，動態建立並載入組件

標籤：extjs5 sushengmiyan

本文地址：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方法，動態建立並載入組件