Question

我在视图中有一个按钮：

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'功能。我该怎么办？

谢谢！

Answer 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();
           });
      }
   }
})

Answer 2

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

{
            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

Answer 3

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

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

3 个答案: