企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
本文地址:[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中指定的,如下: ![](https://box.kancloud.cn/2016-02-03_56b214eb21c33.jpg) 可以看到,items其实就是一个数组,可以看成是json格式样式的一个数组。既然这样,那么当我们定义好了这样的字符串样式之后,可以使用数组的push方法,将这些项,一个一个的加载进去,就可以动态的进行组件创建了。 ![](https://box.kancloud.cn/2016-02-03_56b214eb304d1.jpg) 先看一下效果,右边的fieldset是动态创建出来的,是通过array的push方法加载的: 代码如下: ![](https://box.kancloud.cn/2016-02-03_56b214eb400c3.jpg) ~~~ 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); } } ); ~~~