zoukankan      html  css  js  c++  java
  • [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 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);
    	}
      }
    
    );


  • 相关阅读:
    什么是restful风格?
    android中设置控件获得焦点
    Android中Parcelable的原理和使用方法
    webstorm快捷键大全
    HTTP状态码
    三行代码写爬虫
    HTTrackPortable
    安装mac系统
    Vue常用的操作指令
    什么样的人不适合当程序员呢?
  • 原文地址:https://www.cnblogs.com/muyuge/p/6152500.html
Copyright © 2011-2022 走看看