本文主要是介绍[ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
本文地址: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方法传递参数的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!