View Full Version : Help with iconCls for a toolbar with overflow enabled

28 Aug 2010, 11:20 PM

I have created a toolbar with 32x32 icons which displays great! I then enabled the overflow so that I can resize the window and get a normal menu on the end of it! But when I do that the iconCls shows the icons which are large and they do not look nice..!

Is there a way to mention a secondary class for when this happens? Or what can be done so that a smaller icons is displayed?

Thank you in advance...


30 Aug 2010, 7:37 AM
Hi Mihai,

Maybe you can file a bug report in Ext: Bugs forum regarding this. We have an overflowText option, but no overflowIconCls option, which would be quite useful.

You can attach to the "overflowchange" event for the Toolbar, and when that is fired, you can cycle through all of the items in the Toolbar and check their "xtbHidden" property (this is an internal, undocumented property). If that property is true, then it's hidden and in the overflow menu. You can then swap the iconCls value on the items (buttons) based on their xtbHidden value.

Another option instead of checking the "xtbHidden" property is to cycle through the ToolbarLayout's "hiddenItems" array: http://dev.sencha.com/deploy/dev/docs/?class=Ext.layout.ToolbarLayout&member=hiddenItems accessible via myToolbar.getLayout().hiddenItems.

Hope that helps!

30 Aug 2010, 9:32 PM
Hey man...

Okay I have added a bug: http://www.sencha.com/forum/showthread.php?108495-Toolbar-overflowIconCls-missing...
Thank you for your quick and always helpful reply hehehe...

I think I'd rather wait for the changes than do the cycling - I am very scared of too much resource usage when one resizes the windows. I am already seeing a bit of slowness and I am still trying to figure out what I have done that makes my app a bit slow in redrawing the components on window resizing...!

Amyway - thank you so much for your help - always a great fan of yours and ExtJs Family as whole hehehe...