May 03, 2011, 12:13 PM
Updating the background image of a custom panel tool
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:
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)");
};