EXTJS 里怎么给一个formpanel 加一个监听器(addlistener)监听 form里所有的textfiled的change事件

2024-11-30 08:20:23
推荐回答(1个)
回答1:

一种方法是代码定义:

//公用属性
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() {
//代码
});
}