[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
2014-09-12 10:41
525 查看
本文地址:/article/1331629.html官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push href="http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each" target=_blank>本文作者:sushengmiyan------------------------------------------------------------------------------------------------------------------------------------上一节看到了如何使用fieldset集合来管理组件,其中fieldset中的每一个组件都是在items中指定的,如下:
可以看到,items其实就是一个数组,可以看成是json格式样式的一个数组。既然这样,那么当我们定义好了这样的字符串样式之后,可以使用数组的push方法,将这些项,一个一个的加载进去,就可以动态的进行组件创建了。
先看一下效果,右边的fieldset是动态创建出来的,是通过array的push方法加载的:代码如下:
可以看到,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 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学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- C# 中的动态创建组件(属性及事件)的实现思路及方法
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- malloc与new方法动态创建数组并释放
- OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法
- PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
- 通过字符串调用方法得到结果及动态创建Swing组件和布局
- React Native之ScrollView通过map()方法动态加载数组
- 组合使用构造函数模式和动态原型模式、寄生构造函数模式(创建具有额外方法的特殊数组)
- Ext JS动态加载JavaScript创建窗体的方法
- 安卓四大组件之二#1-Service的创建,生命周期以及动态调用Service里的方法 推荐
- OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法
- 解决水晶报表中动态加载的图片或利用水晶报表创建的图表不显示图片的方法
- OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
- 数组和指针、数组指针和指针数组、函数指针和指针函数、数组标识符的意义、静态和动态创建的数组的本质区别、标识符类型判断方法
- javaScript动态创建数组、动态赋值json数据方法之一(持续补充)
- 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间