extjs如何设置监听

事件监听方法：

（1） 这个方法主要给dom对象来监听事件

Ext.get(document).on('事件',function(){ 处理方法})

（2）写在容器里面 如panel

listeners｛'事件',function(){处理方法}｝

（3）对定义的js类进行事件监听

var eastpanel=new Ext.Panel({

region:'east',

collapsible: true,

width: 275,

items: [{....}]

})

eastPanel.on("collapse",function(e){

alert("ssad")

})

举例：

如何给表单的textfield添加键盘监听事件：

var searchKey = new Ext.form.TextField({ //text

id: 'searchkey',

fieldLabel: 'text',

name: 'text',

defaultType: 'textfield',

grow: false,

blankText: "这个字段最好不要为空"，

enableKeyEvents: true

})

searchKey.on('keypress', function(e){

// 监听回车按键

if (e.getKey() == e.ENTER &&this.getValue().length >0) {

alert("OK")}

})

extjs 事件监听 都是在 创建这个 组件时，组件属性里 写上

listeners: {

select: function(){ 这里写触发后的动作 },

...

change: function(){ 这里写触发后的动作}

}

其中这些function 都有一些回调参数的，你在写的时候，可以参考api文档，了解每个参数的意义，使用起来会更加方便和完善；

另外 给组件添加事件监听，也可以动态的添加，比如：

combobox.on('select',function(){ 这个function 和上面所讲的function 是同样的 })

extjs所有的组件都是用 .on('监听器名称',function(){回调函数} ) 来动态添加...

一种方法是代码定义:

//公用属性

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 = 0i <_fields.lengthi++) {

_fields[i].on('change', function() {

//代码

})

}

---