//公用屬性
var _txta = {anchor: '100%', xtype: 'textfield', allowBlank: false, blankText: '不能為空',
listeners: {
change: function(_field, _newVal, _oldVal){
//事件代碼
alert('a');
}
}
};
var _root = [];
_r = {layout: 'column', items: []};
//Ext.applyIf方法將參數2對象的屬性添加到參數1對象, 如有同名的屬性則不覆蓋, Ext.apply方法則是覆蓋同名屬性. 區別情況使用
_r.items.push({columnWidth: .33, layout: 'form', items:[
Ext.applyIf({fieldLabel: '字段1', name: 'field1'}, _txta)
]});
//換行
_root.push(_r);
_r = {layout: 'column', items: []};
_r.items.push({columnWidth: .33, layout: 'form', items:[
Ext.applyIf({fieldLabel: '字段2', name: 'field2', allowBlank: true}, _txta) //不使用默認allowBlank屬性
]});
_root.push(_r);
//加feildset
_root = {title: '標題', xtype: 'fieldset', collapsed: false, collapsible: true, items: _root};
//使用多語句逐對象添加, 可明顯減少代碼結構錯誤
var _form = new Ext.form.FormPanel({
region: 'north',
layout: 'form',
frame: true,
border: false,
height: 215,
labelAlign: 'right',
items: _root
});
也可以在運行時添加事件處理
//容器類findByType方法第二個參數表示是否只查找指定類型, 指定false表示查詢指定類型包含指定類型的子類
var _fields = _form.findByType('textfield', false);
for (var i = 0; i < _fields.length; i++) {
_fields[i].on('change', function() {
//代碼
});
}