[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
来源:互联网 发布:js金沙国际 编辑:程序博客网 时间:2024/06/07 23:49
本文地址: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 buttonxtype:'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 buttonxtype:'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);} });
2 0
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
- [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
- [ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid
- [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录
- [ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据
- Extjs5.1 柱状图动态加载
- Extjs5的Ext.each方法学习
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
- [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
- ExtJS5.0的加载过程
- extjs5学习笔记之combobox
- Extjs5.1学习笔记1——提示框等基本组件的使用
- ExtJS5.1学习笔记——Grid组件的基本用法
- 项目经验:oracle中一个用户赋予另外一个用户对表增删改查的权限以及同步更新触发器的创建
- ruby语法
- Cygwin以root身份登陆
- android:configChanges="orientation"使用中应该注意的问题
- android share
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- 自己收集些有用的东西
- 多线程下载文件
- LeetCode:Candy
- Canvas数据转图片
- 线程生命周期
- 问题5:RAC + ASM环境下,多路复用控制文件
- 服务器Button执行js方法
- 谷歌开源项目Chromium的源码获取与项目构建(Win7+vs10/vs13)