Create new tool buttons.

[paubach]

Here are some new icons that could be interesting to have on next versions of extjs. Or it can be an example for customize icons:

1. Create your own icons gif. Standard is width 30 for height=15+number of icons. But you can use other sizes with greater width, etc.

2. Change on css where to get the icons by default and the size to display:
Do it for ALL the icons:

.x-tool{overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparent url(../images/tool-sprites.gif) no-repeat;margin-left:2px;}and then define new tools for toolbars:

.x-tool-excel {
background-position:0pt -330px;
}
.x-tool-excel-over {
background-position:-15px -330px;
}OR You can do it only for some icons:

.x-tool-clear{
background-position:0pt -30px;
width:100px;
background-image:url(/cap/images/tool-wide-sprites.gif);
}

.x-tool-clear-over{
background-position:-100px -30px;
width:100px;
background-image:url(/cap/images/tool-wide-sprites.gif);
}Here I've defined the width, and the image to load. I've changed the usual behavior of a 15 px width image to get a 100px image.

3. Call to the tools defined assigning a function to them and the name on the css ('excel' and 'clear' in the examples).


If ExtJS people is interested on the images I can send some png files.


To get images of 100px you'll need to create a gif file with 200px width x 15px (or the height you wanna give) * number of icons.