[ExtJS5 Study Notes] section 20th EXTJS5 to dynamically create and load components with the push method of an array

This address: http://blog.csdn.net/sushengmiyan/article/details/39226773

Official Example: Http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push

This article Sushengmiyan

--------------------------------------------------------------------------------------------------------------- ---------------------

The previous section saw how to use the FieldSet collection to manage components, where each component in FieldSet is specified in items, as follows:

As you can see, items are actually an array, which can be seen as an array of JSON format styles. In that case, after we have defined such a string style, we can use the push method of the array to load the items into one, and you can create the components dynamically.

Look at the effect first, the fieldset on the right is created dynamically and is loaded by the push method of the array:

The code is as follows:

Ext.define (' Fieldsettest.view.form.BaseForm ', {extend: ' Ext.form.Panel ', alias: ' Widget.baseform ', title: ' With fi  Eldset 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: ' Field Set 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 Study Notes] section 20th EXTJS5 to dynamically create and load components with the push method of an array