一种方法是代码定义:
//公用属性
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() {
//代码
});
}