extjs如何设置监听

extjs如何设置监听,第1张

事件监听方法

(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")}

})

一种方法是代码定义:

//公用属性

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() {

//代码

})

}

{

id: "HMonth",

xtype: "checkbox",

boxLabel: "半月报",

width: 50,

checked: true,

listeners : {

'check' : function(){

if(this.checked){

alert(1)//可查询

}

}

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11947240.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存