ExtJS - 来自控制器的自定义按钮调用功能？答案

【问题标题】：ExtJS - Custom button call function from controller?ExtJS - 来自控制器的自定义按钮调用功能？
【发布时间】：2015-11-26 07:34:55
【问题描述】：

我在视图中有一个按钮：

items: [{
    xtype: 'button',
    text: 'Click me!',
    handler: 'onClick' // <- call function from controller
}]

现在我想将该按钮更改为自定义按钮（包含文本和链接），就像这样：

items: [{
    xtype: 'component',
    html: getLink()
}]

在同一个 js 文件中，我有一个函数：

function getLink() {
    // Doing something
    return '<div>Hi, <a href="...">Click me!</a></div>';
}

我想在单击自定义按钮时调用“onClick”函数。我该怎么办？

谢谢！

【问题讨论】：

标签： button extjs

【解决方案1】：

使用afterrender 在控制器中添加点击事件处理程序：

查看：

items: [{
    xtype: 'component',
    html: getLink(),
    itemId: 'myLink'
}]

控制器：

var controller = this;

controller.control({
    // Selector for your link parent component
   'yourSelector': {
      afterrender: function(component) {
           component.down('#myLink').on('click', function() {
                controller.onClick();
           });
      }
   }
})

【讨论】：

【解决方案2】：

您可以在您的listener 上使用element 和delegate，例如：

{
            xtype: 'box',
            html: '<div>Hi, <a class="custom-btn">Click me!</a></div>',
            listeners: {
                click: {
                    element: 'el',
                    delegate: '.custom-btn',
                    fn: function() {
                        console.log('click!');
                    }
                }
            }
        }

https://fiddle.sencha.com/#fiddle/11mt

【讨论】：

【解决方案3】：

xtype: 'component',
autoEl:{
    tag: 'a',
    href: '',
    onClick: 'nameYouFunction'
}

【讨论】：