PDA

View Full Version : Displaying a custom image in place of 'cross' button in tools config options of grid



cahello
10 Jul 2012, 11:18 AM
Hi,

So I have a grid panel and the 'tools' config options. I have 2 handler functions within the 'tools' options that enable/disable an Ext.grid.feature.Grouping feature. So, my question is how do I display my custom images instead of default 'cross' buttons that appear with the panel title bar? When 'enabled' one pair of custom images is to be displayed and when disabled the second pair should be come up.
Can this be done? :-?


Thanks!!

vadimv
10 Jul 2012, 11:44 AM
yes, is possible to add custom images to the tools, you just need to replace the default ones. If their sizes are different, then you will have to change the sass lines for that tools. I did this on an app, had images 27x16, instead of default 15x15, for plus/minus and collapse/expand tools.

cahello
10 Jul 2012, 11:53 AM
So I understand that its a theming issue. Since I am a newbie, it would really help if you elaborated it a bit. Like, how do I track down the actual file that has the default 'cross' buttons? Or where exactly should I place my custom code to be able to reflect the changes?

Thanks a lot.....

vadimv
10 Jul 2012, 12:01 PM
yes it's matter of theming. To replace the sprites you just need to override the specific class, in this case it's x-tool:


.x-tool img {
background-image: url('../../resources/images/header-sprites.png') !important;
}

as I said before in case that the sizes of the sprite is different you have to adjust sprites positions for that classes within sass files. In 'extjs-4.1.1/resources/themes/stylesheets/ext4/default' you find them.

cahello
10 Jul 2012, 12:34 PM
Thanks.... I will explore more with respect to what you mentioned and see if I can manage what I intend to do....

cahello
11 Jul 2012, 7:46 AM
Hi..... I have looked into the sass files and probably found the image I would like to replace. I say probably because I am not 100% sure if '$tab-closable-icon: 'tab/tab-default-close.gif' !default;' is the one that controls the [x] button of the 'tools' config option in the grid.

However, I am not able to find the place where I need to add the image or modify the code to replace the image. Is there any doc (apart from the theming doc) or any link that has this solution? That would be of great help.

Thanks a lot.....

cahello
11 Jul 2012, 10:48 AM
Also, will I need Ruby and Compass/Sass gem for making these kind of changes?

cahello
11 Jul 2012, 1:35 PM
So, I added the type: 'enable-grouping' and type: 'disable-grouping' in the tools config. Then, created a css file specific to the project. In the css file I defined the two classes as follows:

.x-tool-enable-grouping {
background-image: url('project-name/Images/image-name.png') !important;
}


.x-tool-disable-grouping {
background-image: url('project-name/Images/image-name.png') !important;
}

I also changed the image dimensions in the sass file _tabs.scss. This makes the "cross" buttons disappear but the custom images are still not displayed in their places.
"Images" is the folder where I have put the custom images.
All these changes have been made within the specific project, and not in the extjs library. Where am I going wrong? :(

vadimv
11 Jul 2012, 10:46 PM
Also, will I need Ruby and Compass/Sass gem for making these kind of changes?
yes

vadimv
11 Jul 2012, 10:52 PM
Hi..... I have looked into the sass files and probably found the image I would like to replace. I say probably because I am not 100% sure if '$tab-closable-icon: 'tab/tab-default-close.gif' !default;' is the one that controls the [x] button of the 'tools' config option in the grid.

However, I am not able to find the place where I need to add the image or modify the code to replace the image. Is there any doc (apart from the theming doc) or any link that has this solution? That would be of great help.

Thanks a lot.....
there's no any guide to help you. Why not just to add your own tools, or why not just to add a toolbar with a toogle button which will enable/disable grouping feature, would simplify your life ;)

vadimv
11 Jul 2012, 10:56 PM
So, I added the type: 'enable-grouping' and type: 'disable-grouping' in the tools config. Then, created a css file specific to the project. In the css file I defined the two classes as follows:

.x-tool-enable-grouping {
background-image: url('project-name/Images/image-name.png') !important;
}


.x-tool-disable-grouping {
background-image: url('project-name/Images/image-name.png') !important;
}

I also changed the image dimensions in the sass file _tabs.scss. This makes the "cross" buttons disappear but the custom images are still not displayed in their places.
"Images" is the folder where I have put the custom images.
All these changes have been made within the specific project, and not in the extjs library. Where am I going wrong? :(

If you want to change one tool's image then you have to provide a header for all images. The one you have to replace is located in 'resources/themes/images/[theme]/tools/'. But IMO this is a bad idea, see my previous post for simpler and better solutions