Question

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

比如说 如下定义的一个formpanel 里有4个textfiled
{xtype:'fieldset',id:'exchanginfo1',frame:true,title:'房屋交易基本信息',layout:'column',labelWidth:70,
items:[
{columnWidth:.66,layout:'form',items:[
{xtype:'textfield',fieldLabel: '房屋坐落',name: 'fmzl',anchor:'98.6%',allowBlank: false,id:'fmzl'}
]},
{columnWidth:.34,layout:'form',items:[
{xtype:'textfield',fieldLabel: '房　　号',name: 'fh',anchor:'96%',id:'fh',allowBlank: false,
]},
{columnWidth:.33,layout:'form',items:[
{id:'szcs',xtype:'textfield',fieldLabel: '所在层数',name: 'szcs',anchor:'96%'}
]},
{columnWidth:.34,layout:'form',items:[
{xtype:'textfield', decimalPrecision :0,fieldLabel: '建成年份',name: 'jcnf',anchor:'96%',id:'jcnf'}
]},
]},

哪个大牛帮我写个 监听事件 “ischange” 判断 4个textfiled 里的内容是不是发生变化（只要有一个发生变化就触发）， 由于是新手 写个格式框架给 谢谢

Answer 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() {
//代码
});
}