本文地址: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 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方法,动态创建并加载组件的更多相关文章

  1. [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...

  2. [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...

  3. [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39665979 官方文档:http://docs.sencha.com/extjs/5. ...

  4. [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...

  5. [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan ------------------ ...

  6. [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...

  7. [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39667533 官方文档:http://docs.sencha.com/extjs/5. ...

  8. [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...

  9. [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40507383 插件下载: http://download.csdn.net/detai ...

随机推荐

  1. 51 nod 1515 明辨是非(并查集合并)

    1515 明辨是非题目来源: 原创基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 给n组操作,每组操作形式为x y p. 当p为1时,如果第x变量和第y个变量可以 ...

  2. ●BZOJ 2560 串珠子

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2560 题解: 容斥,状压计数dp 首先求出一个数组 g[s] 表示集合内的点的连边方案数(两 ...

  3. 对中断的理解handle_level_irq【原创】

    如下为本人原创,在解决问题的过程中的一点心得,如果有描述不准确的地方还请各位指出,非常感谢 Linux内核版本:linux-4.9.18 曾有一次调试触摸屏的时候遇到如下的问题 /startup/mo ...

  4. C++函数式编程实现牛顿法

    In numerical analysis, Newton's method (also known as the Newton–Raphson method), named after Isaac ...

  5. jquery 数组操作 $.unique() $.inArray()

    1.去除重复 $.unique() $.unique() 去掉重复的元素 注意 : 执行unique之前,要先调用sort对数组的内容进行排序. <script src="http:/ ...

  6. JS多个对象添加到一个对象中

    var obj1 = {"qq":10}; var obj2={"mm":2,"nn":3}; var obj3={"xx&quo ...

  7. CSS之绝对定位

    w3school定义: 绝对定位的元素的位置相对于最近的已定位祖先元素(这里的已定位指的是绝对定位或者相对定位),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块. 对于定位的主要问题是要 ...

  8. jquery easyui datagrid改变某行的值

    $("#DeterminateMembers").datagrid("updateRow",{index:index,row:{fzr:"0" ...

  9. svg和css实现波浪动效

    效果: 截图有点模糊~ 实现: <svg教程> //html <body> <svg class="wave-container" xmlns=&qu ...

  10. 如何上传本地项目到gitHub解决方案

    最近有人有人问到我怎么将新创建的本地代码上传到github上,这里简单的记录一下,我喜欢使用命令行,这里全用命令行来实现,不了解Git命令的可以去了解下. 1.  建立本地仓库,cd到你想要上传文件的 ...