本文地址：[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中內容就可以了，這樣就方便多了。