本文地址: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. [Apio2009]Atm

    题目描述 输入 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口编号.接下来N行,每 ...

  2. HDU 1729

    给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置 她在行走过程中,不能转太多弯了,否则她会晕倒的. (每次在一个方向上一直走到底,并push ...

  3. hdu 2825 aC自动机+状压dp

    Wireless Password Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. poj1753 高斯消元

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 37055   Accepted: 16125 Descr ...

  5. (MariaDB/MySQL)之DML(2):数据更新、删除

    本文目录:1.update语句2.delete语句 2.1 单表删除 2.2 多表删除3.truncate table 1.update语句 update用于修改表中记录. # 单表更新语法: UPD ...

  6. 关于InnoDB的读写锁类型以及加锁方式

    (本文为了方便,英文关键词都都采用小写方式,相关知识点会简单介绍,争取做到可以独立阅读) 文章开始我会先介绍本文需要的知识点如下: innodb的聚簇索引(聚集索引)和非聚簇索引(二级索引.非聚集索引 ...

  7. 如何理解主函数main中变量(int argc,char *argv[])的含义

    每一个C语言的初学者,都会注意到主函数main()里的两个参数,但是初学者一般不会去关注这两个参数的具体作用,下面我们就来介绍这两个参数的具体作用. main()函数是控制台程序的入口,int mai ...

  8. JavaScript进阶-this

    1.什么是this? 当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文).这个记录会包 含函数在哪里被调用(调用栈).函数的调用方法.传入的参数等信息.this 就是记录的 其中一个属性 ...

  9. sqlserver批量更新数据

    update t_hr_teadept set rjkm=b.yjkmfrom t_hr_teadept a inner join t_tr_bzxx_km b on a.bzh=b.bzh wher ...

  10. My Stuck in C++

    My Stuck in C++ Zhong-Liang Xiang Oct. 1st, 2017 这个专题记录了对于我而言, c++迷一样的东西.