How can I programmatically replace the toolbar icon

Question

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

Each portlet has tools (as in the example) (for example.):

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

When the gear tool is clicked, in the handler I would like to replace the gear tool with another tool (for example, the maximize tool).
I would appreciate any suggestions on how to do this.

Thank.

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

Answer 2

left // right

Tnx !

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