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

    }
  }
}

Answer 3

这是最好的方法，请注意使用.mon()代替.on()的托管侦听器，当您从可能被销毁的组件中侦听DOM元素时，最好使用它/ p>

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
}

Answer 4

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

如何向extjs autoel添加click事件？

4 个答案: