码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-12 12:01:46      阅读:229      评论:0      收藏:0      [点我收藏+]

标签: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中指定的,如下:

bubuko.com,布布扣

可以看到,items其实就是一个数组,可以看成是json格式样式的一个数组。既然这样,那么当我们定义好了这样的字符串样式之后,可以使用数组的push方法,将这些项,一个一个的加载进去,就可以动态的进行组件创建了。

bubuko.com,布布扣

先看一下效果,右边的fieldset是动态创建出来的,是通过array的push方法加载的:

代码如下:

bubuko.com,布布扣

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);
	}
  }

);


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

标签:extjs5 sushengmiyan

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!