如何将点击事件添加到extjs autoel？

Question

如果我添加这样

xtype: 'component', 
autoEl: { 
    html: '<input type="submit" class="custom_loginbtn" value="Submit" id="login"/>' 
} 

任何想法按钮如何将点击事件添加到这一点？

问候

Answer 1

尝试添加监听

listeners: { 
       render: function(component){ 
        component.getEl().on('click', function(e){ 
        console.log(component); 
        alert('test'); 
        });  
       } 
      } 

检查this

Answer 2

您使用的是标准的提交按钮，为什么不使用的xtype按钮？ - 它可以为您的点击事件指定一个处理程序。

Answer 3

xtype : 'component', 
itemId : 'submitbtn', 
autoEl : { 
    html : '<input type="submit" class="custom_loginbtn" value="Login" id="login"/>' 
}, 
listeners : { 
    el : { 
    delegate : 'input', 
    click : function() 
    { 

    } 
    } 
} 

Answer 4

这是最好的方法，注意代替.on()这是更好地与.mon()使用管理听众的，当你从可能被损坏的元器件听DOM元素使用

xtype: 'component' 
,html: '<input type="submit" class="custom_loginbtn" value="Submit" id="login"/>' 
,listeners: { 
    afterrender: function(inputCmp) { 
     inputCmp.mon(inputCmp.el, 'click', function(){alert('click!')}, this, {delegate:'input'}); 
    } 
    ,single: true 
} 

此外，您使用autoEl类似于设置组件的html属性，autoEl中的其他选项允许您操作自动创建的外部标签的类型和属性以包含组件

如果你这样做，而不是你可以把关闭组件本身为<input>，避免包装<div>：

xtype: 'component' 
,autoEl: { 
    tag: 'input' 
    ,cls: 'custom_loginbtn' 
    ,type: 'submit' 
    ,value: 'Submit' 
} 
,listeners: { 
    afterrender: function(inputCmp) { 
     // no delegate needed, since inputCmp.el is the <input> 
     inputCmp.mon(inputCmp.el, 'click', function(){alert('click!')}, this); 
    } 
    ,single: true 
}