Componente ExtJS4 LinkButton

Intento crear mi propio componente LinkButton en Ext JS 4. Nada nuevo, ¿verdad?

Mi código se ve así:

Ext.define('LinkButton', { extend: 'Ext.Component', xtype: 'linkbutton', autoEl: 'a', renderTpl: '{text}', 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); } } }); 

¡Hasta aquí todo bien! Mi LinkButton se parece a un hipervínculo y mi contenido de texto está ahí. Agraciado.

Sin embargo, no puedo hacer que mi componente active un evento cuando hago clic en él.

Esta línea particular me.on('click', handler); no está funcionando! Incluso si lo cambio de on a addListener no tiene ningún efecto.

Entonces la pregunta es: ¿cómo agrego eventos DOM a mi componente? O, mejor aún, ¿cómo accedo al elemento DOM de mi propio componente? ¡No he podido hacer nada de eso!

¡Gracias!

Aquí está mi proposición, que se basa en la fuente del componente Button :

 Ext.define('LinkButton', { extend: 'Ext.Component', xtype: 'linkbutton', autoEl: 'a', renderTpl: '{text}', 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); } } }); 

Muestra de trabajo: http://jsfiddle.net/lolo/AEwH4/1/

O puedes hacer esto

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

la forma correcta es usar Ext.view.View para tales tareas. Hay un html personalizado que le permite hacer cualquier cosa, y al mismo tiempo, está disponible toda la funcionalidad de Ext.Component.

    Intereting Posts