ExtJS4のLinkBut​​tonコンポーネント

Question

私は右、内線JSに新しい4.何を私自身のLinkBut​​tonコンポーネントを作成しないようにしようとしていますか？

私のコードは次のようになります。

Ext.define('LinkButton', { 
    extend: 'Ext.Component', 
    xtype: 'linkbutton', 
    autoEl: 'a', 
    renderTpl: '<a href=\"javascript:;\">{text}</a>', 
    config: { 
     text: '', 
     handler: function() { } 
    }, 
    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 

     this.renderData = { 
      text: this.getText() 
     }; 

     var handler = me.getHandler(); 
     if (handler) { 
      me.on('click', handler); 
     } 
    } 
}); 

をこれまでのところは良いです！私のLinkBut​​tonは私のテキストコンテンツがそこにある場合にハイパーリンクのように見えます。グレースフル。

しかし、コンポーネントをクリックしてイベントを発生させることはできません！

この特定の行me.on('click', handler);はではありませんが働いています！私はのaddListenerににからそれを変更しても効果はありません。

そこで質問です：私は私のコンポーネントにDOMイベントを追加するにはどうすればよいですか？または、さらに良い方法は、自分のコンポーネントのDOM要素にアクセスするにはどうすればいいですか？私はそれをすることができませんでした！

ありがとうございます！

Answer 1

を行うことができますがButtonコンポーネントからソースに基づかれている私の提案で、次のとおりです。

Ext.define('LinkButton', { 
    extend: 'Ext.Component', 
    xtype: 'linkbutton', 
    autoEl: 'a', 
    renderTpl: '<a href=\"javascript:;\" id="{id}-btnEl">{text}</a>', 
    config: { 
     text: '', 
     handler: function() { } 
    }, 
    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 

     this.renderData = { 
      text: this.getText() 
     }; 
    }, 
    onRender: function(ct, position) { 
     var me = this, 
      btn; 

     me.addChildEls('btnEl'); 

     me.callParent(arguments); 

     btn = me.btnEl; 

     me.mon(btn, 'click', me.onClick, me); 
    }, 
    onClick: function(e) { 
     var me = this; 
     if (me.preventDefault || (me.disabled && me.getHref()) && e) { 
      e.preventDefault(); 
     } 
     if (e.button !== 0) { 
      return; 
     } 
     if (!me.disabled) { 
      me.fireHandler(e); 
     } 
    }, 
    fireHandler: function(e){ 
     var me = this, 
      handler = me.handler; 

     me.fireEvent('click', me, e); 
     if (handler) { 
      handler.call(me.scope || me, me, e); 
     } 
    } 
}); 

ワーキングサンプル：http://jsfiddle.net/lolo/AEwH4/1/

Answer 2

それとも、ここでは、この

afterRender : function() { 
    this.callParent(arguments); 

    this.mon(this.el, { 
     scope : this, 
     delegate : 'a', 
     click : this.handleClick 
    }); 
}, 

handleClick : function(e, t) { 
    e.stopEvent(); 

    var handler = this.getHandler(); 
    if (handler) { 
     handler(); 
    } 
} 

Answer 3

正しい方法がにありますそのような作業にはExt.view.Viewを使用してください。何でもできるカスタムhtmlがあり、同時にExt.Componentのすべての機能が利用可能です。