如何向extjs autoel添加单击事件?

If i add a button like this

如果我像这样添加一个按钮

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

any idea how to add a click event to this ?

你知道怎么添加点击事件吗?

Regards

问候

4 个解决方案

#1

try adding listener

尝试添加监听器

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

check this

检查这个

#2

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

    }
  }
}

#3

This is the best approach, notice the use of a managed listener with .mon() in place of .on() which is better to use when you're listening to DOM elements from components that could be destroyed

这是最好的方法，注意使用.mon()作为.on()的托管侦听器，当您从可能被破坏的组件侦听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
}

Also, your use of autoEl is analogous to just setting the html property of the component, other options in autoEl let you manipulate type and attributes of the outer tag that is automatically created to encompass the component

同样，您对autoEl的使用类似于仅仅设置组件的html属性，autoEl中的其他选项允许您操作外部标记的类型和属性，这些属性是自动创建来包含组件的

If you did this instead you could turn turn the component itself into an <input> and avoid the wrapping <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
}

#4

You are using a standard submit button, why not use an xtype button? - it has a handler you can specify for your click event.

您正在使用一个标准的提交按钮，为什么不使用一个xtype按钮呢?-它有一个你可以为你的点击事件指定的处理器。

#1