(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)//可查询
}
}
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)