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

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

2024-07-22 10:02:30   223人阅读

本文地址：http://blog.csdn.net/sushengmiyan/article/details/39252805

官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config

本文作者：sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

对于Extjs5的使用方式，我习惯性的是，先使用Ext.define方法定义一个自己的类，然后使用extend属性继承某一ext现在存在的类，然后制定alias的widget别名，最后配置属性，格式如下：

Ext.define(//使用Ext.define定义一个类
  ‘argtest.view.form.BaseForm‘,//类名称是BaseForm 存在于argtest项目中，在view文件夹中的form文件夹下是以BaseForm.js的文件形式存在的
  {
    extend: ‘Ext.form.Panel‘,//继承自Ext的类，相当于重写了
    alias: ‘widget.baseform‘,//制定别名，后期使用的时候就可以拿baseform来获取了
    title: ‘abc‘,		  
	//组件初始化，在构造方法之后执行
    initComponent: function(){
		 this.items = [];
		 this.callParent(arguments);
	}	
});

这样我定义了一个BaseForm当后期使用的时候，我就可以通过uses引入这个类，然后使用Ext.widget(‘baseform‘)获取这个对象的。但是现在有个问题就是，我想给这个对象赋值一定的特性，比如我想给form制定标题，那么我们是这么做的，Ext.widget(‘baseform‘,{title: ‘自定义标题‘})

这样的话，每调用一次，都会按照你制定的标题来创建这个窗体了，但是现在的问题是，title是form自带的，所以你这么写是正确的，但是我想传入一个自己定义的数据该怎么办呢？

这时候就需要使用config属性了。

我们这样做：

在define定义的时候，制定config属性：

Ext.define(
  ‘argtest.view.form.BaseForm‘,
  {
    extend: ‘Ext.form.Panel‘,
    alias: ‘widget.baseform‘,
	title: ‘abc‘,
	config:{
	  fields: undefined
	},
		  
	//组件初始化，在构造方法之后执行
    initComponent: function(){
		 this.items = [];
		 var me = this;
         var fieldsets = this.fields;
		 Ext.each(fieldsets, function(onefieldset, fieldindex) {
		   console.log(onefieldset);
		   me.items.push(onefieldset);
		   console.log(me.items);
		 });
		 this.callParent(arguments);
	}	
});

在调用的时候，传入一个这个即可：

var form = Ext.widget(‘baseform‘,{fields: me.fields});
这个原理的话，看一下http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config这个就可以的。

下面是我写的参数传递的例子，大家可以看下：

一、使用sencha cmd生成一个默认extjs5项目

二、在app文件夹下的view目录下定义两个包form和window 分别在里面创建BaseWindow.js和BaseForm.js文件，代码如下：

Ext.define(
  ‘argtest.view.window.BaseWindow‘,
  {
	  extend: ‘Ext.window.Window‘,
	  alias: ‘widget.basewindow‘,
	  uses: [‘argtest.view.form.BaseForm‘],
	  autoshow: true,
	  config: {
	    fields: undefined
	  },
	  closeAction: ‘hide‘,
	  //初始化为一个空数组，后期使用push方法增加组件
      items: [],
  
	  //组件初始化，在构造方法之后执行
      initComponent: function(){
		   var me = this;
           var form = Ext.widget(‘baseform‘,{fields: me.fields});
		   me.items = [form];
	       console.log(me.items);
		   this.callParent(arguments);
	  }    
});


Ext.define(
  ‘argtest.view.form.BaseForm‘,
  {
    extend: ‘Ext.form.Panel‘,
    alias: ‘widget.baseform‘,
	title: ‘abc‘,
	config:{
	  fields: undefined
	},
		  
	//组件初始化，在构造方法之后执行
    initComponent: function(){
		 this.items = [];
		 var me = this;
         var fieldsets = this.fields;
		 Ext.each(fieldsets, function(onefieldset, fieldindex) {
		   console.log(onefieldset);
		   me.items.push(onefieldset);
		   console.log(me.items);
		 });
		 this.callParent(arguments);
	}	
});

三、修改MianController.js的按钮单击函数

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "autoCreateViewport" property. That setting automatically applies the "viewport"
 * plugin to promote that instance of this class to the body element.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define(‘argtest.view.main.MainController‘, {
    extend: ‘Ext.app.ViewController‘,
    uses: [‘argtest.view.window.BaseWindow‘],
    requires: [
        ‘Ext.MessageBox‘
    ],

    alias: ‘controller.main‘,

    onClickButton: function () {
        //Ext.Msg.confirm(‘Confirm‘, ‘Are you sure?‘, ‘onConfirm‘, this);
		var win = Ext.widget(‘basewindow‘, {
		  fields: this.getViewModel().get(‘tf_fields‘) 
		});
        win.show();
		//console.log(this.getViewModel().get(‘tf_fields‘));
    },

    onConfirm: function (choice) {
        if (choice === ‘yes‘) {
            //
        }
    }
});

修改MainModel中的数据，增加字段集合的定义：

/**
 * This class is the view model for the Main view of the application.
 */
Ext.define(‘argtest.view.main.MainModel‘, {
    extend: ‘Ext.app.ViewModel‘,

    alias: ‘viewmodel.main‘,

    data: {
        name: ‘argtest‘,

		tf_fields: [{  
            // 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  
            }]  
        }]
    }

    //TODO - add data, formulas and/or methods to support your view
});

好了。到此都修改完成了。现在所做的东西就是讲MainModel中的自定义的tf_fields数组内容，安装传递的方式，将数组逐级传入到了显示出来的form里面，最后你点击按钮，显示出的界面就是这样了：

后面想修改这个界面，不需要修改其他东西了，只需要修改MaiModel.js中内容就可以了，这样就方便多了。


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


联系
我们