Hi All,

I'm trying to find a way to change the expand/collapse icons of a panel to custom ones, the solution I've been trying is to hide the default tool and to create a custom one, the problem is that when and expand/collapse operation occurs I'm trying to change the icon using Ext.util.CSS.updateRule but it's not working, what's the problem, is there a workaround?

here's the parts of the code that matter:


                                                <ext:Portlet Icon="Cog" ID="Portlet1" runat="server" Padding="5" Title="Pending Tasks">
                                                    <Tools>
                                                        <ext:Tool CustomType="Zoom" Handler="MinMax(Portlet1);" />
                                                    </Tools>
.x-tool-Zoom
{
    background-image: url(/Resources/images/zoom_out.gif);
}
        var MinMax = function (panel) {
            panel.toggleCollapse();
            var success = Ext.util.CSS.updateRule(".x-tool-Zoom", "background-image", "url(../../Resources/images/baricon.png)");
        };