本文地址：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中内容就可以了，这样就方便多了。