ExtJS中如何给Label添加click事件

编程技术  /  houtizong 发布于 3年前   68

ExtJS中如何给Label添加click事件

      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
          }
         }
        }]
     });
  });