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

本文主要是介绍[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文地址: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);}});


这篇关于[ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/751861

相关文章

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu