ExtJS通过面向对象的方式封装组件,本来是极好的
但是编写代码时,却经常 为了声明一个控件,传入繁杂的参数 。
最终导致ExtJS代码看起来又长又臭,各位大神,你们在写ExtJS代码时,如何写得更优雅呢?
类似CSS reset的方式:给控件定义一套样式,这样就不必重复的声明控件的宽高什么的
预先定义组件的声明,在使用控件时,通过JQuery.extend(true,widget,map)
方法参数合并进来
以下,是在一个formPanel中定义两个combobox(下拉框)控件,感受一下重复的编写定义combobox参数的代码
Ext.onReady(function() {
var genus_store = new Ext.data.SimpleStore( {
fields : [ 'value', 'text' ],
data : []
});
var form_condition = new Ext.FormPanel( {
region : 'west',
split : false,
labelWidth : 80,
frame : true,
width : 275,
defaults : {width : 150},
labelAlign : 'right',
defaultType : 'textfield',
autoScroll : true,
items : [
{
xtype : 'combo',
fieldLabel : '省/市',
name : 'docKind',
mode : 'local',
readOnly : false,
triggerAction : 'all',
emptyText : '省/市',
hiddenName : 'docKind',
valueField : 'value',
displayField : 'text'
},
{
xtype : 'combo',
fieldLabel : '市/镇/县',
name : 'genus',
id : 'genus_id',
mode : 'local',
readOnly : false,
triggerAction : 'all',
emptyText : '市/镇/县',
store : genus_store,
hiddenName : 'genus',
valueField : 'value',
displayField : 'text'
}]
});
});
Now we only need to write js instead of html and css. This is the contribution of ext. I need to pass a long configuration. Is there any good way to solve it?