ExtJS中Ext.form.Label默认是没有click事件的,但由于项目需要,要求给label添加一些其它的事件,本文提供两种方法对这个class进行扩展,方法如下:
方法1:
Ext.onReady(function() {
var p = new Ext.ux.MyPanel({
renderTo : document.body
});
});
Ext.ux.MyPanel = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.apply(this, {
width : 200,
height : 200,
items : [{
xtype : 'label',
id : 'mylabel1',
html : 'Label 1',
listeners : {
render : function() {//渲染后添加click事件
Ext.fly(this.el).on('click',
function(e, t) {
// do stuff
alert('Hi');
});
},
scope : this
}
}]
});
Ext.ux.MyPanel.superclass.initComponent.call(this);
}
});
方法2:
Ext.onReady(function() {
//在渲染后添加click事件
Ext.form.Label.prototype.afterRender = Ext.form.Label.prototype.afterRender
.createSequence(function() {
this.relayEvents(this.el, ['click']);
});//这一段一定要放在label之前
var tempPanel = new Ext.Panel({
layout : 'fit',
renderTo : document.body,
items : [{
xtype : 'label',
text : 'label click',
listeners : {
'click' : {
fn : function(field) {
alert("Hi");
},
scope : this
}
}
}]
});
});