自娱自乐

本人收藏的一些文章,供学习使用
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ExtJS中如何给Label添加click事件

Posted on 2009-11-12 14:24  lwjacky  阅读(956)  评论(0编辑  收藏  举报

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