如何將點擊事件添加到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 
}