本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39252805](http://blog.csdn.net/sushengmiyan/article/details/39252805) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/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](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中内容就可以了，这样就方便多了。