How can I programatically replace a tools icon on a panel

Basically, I have a portal similar to: http://dev.sencha.com/deploy/dev/examples/portal/portal.html

The portlets each have tools (just like the example given) (eg.):

var tools = [{
    id:'gear',
    handler: function(evt, toolEl, panel, tc){
        Ext.Msg.alert('Message', 'Replace my ic开发者_StackOverflow中文版on 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);
    }
}];

When the 'gear' tool is clicked, in the handler, I would like to replace the 'gear' tool with another tool (like the 'maximize' tool).

I'd appreciate any suggestions on how to accomplish this.

Thanks.

Try this edited code as your tool config. Note that this will work but is not "production ready". e.g.- you don't want to add listeners everytime the tool is clicked.

{
        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');
            });
        }
    }

Tools for toggle panel left // right

Tnx for the help!

tools:[{
    id:'left',
    qtip:this.Colapsar,
    scope:this,
    handler:function(event, toolEl, panel, tc){
        panel.getEl().stopFx().shift({
        x:-166,
        easing:'easeOut',
        duration:.35
        });
    toolEl.dom.qtip = this.Expandir;
    toolEl.hide();
    panel.tools.right.show();   
    }
},{
    id:'right',
    qtip:this.Expandir,
    scope:this,
    hidden:true,
    handler:function(event, toolEl, panel, tc){
        panel.getEl().stopFx().shift({
        x: 20,
        easing: 'easeOut',
        duration: .35
    });
    toolEl.dom.qtip = this.Colapsar;
    toolEl.hide();
    panel.tools.left.show();    
    }
}]