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