extjs - 如何以编程方式替换面板上的工具图标

Question

基本上，我有一个类似于以下内容的门户:
http://dev.sencha.com/deploy/dev/examples/portal/portal.html

每个portlet都有工具(就像给定的示例一样)(例如):

var tools = [{
    id:'gear',
    handler: function(evt, toolEl, panel, tc){
        Ext.Msg.alert('Message', 'Replace my icon now please.');
        // following 2 code lines is one way to get part way there, 
        // but it shows the original image when I hover over it
        //toolEl.removeClass('x-tool-gear')
        //toolEl.addClass('x-tool-maximize')
    }
},{
    id:'close',
    handler: function(e, target, panel){
        panel.ownerCt.remove(panel, true);
    }
}];

单击“齿轮”工具时，在处理程序中，我想将“齿轮”工具替换为另一个工具(例如“最大化”工具)。
我将不胜感激有关如何完成此操作的任何建议。

谢谢。

Answer 1

尝试将此编辑后的代码作为您的工具配置。请注意，这将起作用，但不是“生产就绪”的。例如-您不想每次单击该工具时都添加侦听器。

{
        id:'gear',
        handler: function(evt, toolEl, panel, tc){
            toolEl.removeClass('x-tool-gear');
            toolEl.removeClass('x-tool-gear-over');
            toolEl.addClass('x-tool-maximize');
            toolEl.on('mouseenter', function(e,t,o){
                toolEl.removeClass('x-tool-gear-over');
                toolEl.addClass('x-tool-maximize-over');
            });
            toolEl.on('mouseleave', function(e,t,o){
                toolEl.removeClass('x-tool-maximize-over');
                toolEl.addClass('x-tool-maximize');
            });
        }
    }