View Full Version : Change the Window Tool size

25 May 2012, 6:10 PM
Is there a way to change the size of the tool icons? They are currently 15x15 but I'd like to make them about 20x20, but still be positioned correctly. Any information on how to do this?

26 May 2012, 6:40 AM
Have a look at: (inspecting tool icon in DeveloperTools(chrome)/Firebug
.x-tool img { .. }

The sprites are located at: (refer to your local version)


26 May 2012, 9:23 AM
Thanks Scott. I've changed the image and its' size, but now I would like to move it further left. After looking at the DOM in Firebug the tool is being positioned using left:somevalue. If I change the size of the tool then it becomes really close to the right border of the window. Is this positioned in Javascript? If so if someone could point me to where so I can have more control over it's position that would be great.

7 Nov 2012, 10:42 AM
I'm also trying to do the same thing. I've examined the CSS and have made the following change:
.vdsNavigation .x-tool {
width: 21px;
height: 21px;
.vdsNavigation .x-tool-collapse-top {
background-position: 0px 0px;
background-image: url(assets/btn_close.png) !important;
background-color: transparent;
.vdsNavigation .x-tool-expand-bottom {
background-position: 0px 0px;
background-image: url(assets/btn_open.png) !important;
background-color: transparent;
}This does cause my correct image to appear as 21x21, however internally the style of .x-tool is being set inline back to 15x15. The 15x15 div.x-tool is positioned for 15x15 and not 21x21, even though the .x-tool IMG is sized to 21x21. This means the tool is not centered for the 21x21 image, and only the upper left 15x15 rectangle actually activates its function (expanding or collapsing).

How do I override (or remove) that inline style?
(Sencha 4.1.x, Architect 2.1, Internet Explorer 8)

31 Jan 2014, 12:22 PM
Having sort of the same problem here on 4.2.1. I'm setting $tool-size to 23px and apparently it's applied to the .x-tool img, but the .x-tool doesn't adjust to the inner image's size. Also the "text" part of the header is not getting this tool size.

EDIT: Looking at older versions, this size was applied to the .x-tool and worked (ie 4.0.7).

31 Jan 2014, 12:32 PM
I was unable to solve this issue, and convinced the product owner to accept the smaller icons.

31 Jan 2014, 12:46 PM
Further debugging took me to this:


If I manually add a close tool (not the one created with "closable: true") and add the sizes manually to the ".x-tool", the "manual close tool" renders ok and also the text container is making space for it. But the automatic close tool keeps with default sizes and and so is the space text container is making for it.

7 Jul 2014, 4:44 AM
Did anyone figure out how to use larger icons for the tools?

I've been playing around with it a bit but have not come up with a satisfactory solution.

I'm still using Extjs 4.


Bernd Goldschmidt
16 Dec 2014, 11:57 AM
You can define width and height of tool itself when defining it:

type: 'close',
tooltip: 'Return',
cls: 'tool-something-close',
width: 32,
height: 32,
callback: 'returnItem'