Question

我有一个带有标题的Ext.js容器，标题包含一个文本作为标题和一个图标。用于刷新选项卡。如何获取该容器标题的图标点击事件？我已使用icon: '@Url.Content("~/Images/icon-supp.png")',获取文本旁边的图标。这是我的代码：

'TabChange'仅在选项卡更改时激活，而不是在单击图标时激活。

更多信息：我有一个中心容器。我添加了一个Ext.tab.Panel，它有

 items: [ 
            {
                                xtype: 'container',
                                title: 'FooText',
                                id: 'FooPanel',
                                icon: '@Url.Content("~/Images/icon-refresh.png")',
  tools: [{
                        type: 'help',
                        handler: function(){
                            //Doesnt hit on click of tab
                        }
                    }, {
                        itemId: 'refresh',
                        type: 'refresh',
                        hidden: true,
                        handler: function(){
                            //Doesnt hit on click of tab
                        }
                    }
                    }],
                                listeners: {
                                    activate: function () {
                                       //This just hits only once when that tab gets activated./
                                        alert('you clicked me');
                                    },
                                    click:function(){//Doesnt work},
                                        },
                                    handler:function(){//Doesnt work},

                                autoScroll: true,

                            },

现在我需要的是点击图片图标的handel事件。有可能吗？

Answer 1

最后，我继续在标题上使用html图像按钮并处理onClick事件。就这样

title: 'fooTitle <input type="image" style="float: right;padding-left:10px; height: 15px;width:30px; " src="Images/icon-refresh.png" onclick="refreshFooTab()"></input>',

function refreshFooTab()
{...}

Answer 2

如果问题是刷新标签点击图标，你知道这些工具吗？

tools:

要添加到标题工具区域的Ext.panel.Tool配置/实例数组。这些工具存储为标题容器的子组件。可以使用down和{query}以及其他组件方法访问它们。如果collapsible设置为true，则会自动创建切换工具。

请注意，除了面板可折叠时提供的切换工具外，这些工具仅提供可视按钮。必须通过添加实现必要行为的处理程序来提供任何所需的功能。

使用示例：

tools:[{
    type:'refresh',
    tooltip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panelHeader) {
        // refresh logic
    }
},
{
    type:'help',
    tooltip: 'Get Help',
    callback: function(panel, tool, event) {
        // show help here
    }
}]

显然使用这些已经拥有监听器的工具，你可以为它们设置css，并按照你的意愿制作工具。

此处有更多信息： https://docs.sencha.com/extjs/5.1/5.1.2-apidocs/#!/api/Ext.panel.Panel-cfg-tools

如何为Ext.js中的Icon附加On Click事件

2 个答案: