PDA

View Full Version : Panel Header Collapsible Icon Css Override



AJAIN32
15 May 2015, 12:05 PM
Hi,

I am trying to override the collapsible icon css, but couldn't proceed furture. can anyone please tell me how i can change the background image with the same position ? I tried using tools config and it allows you to place a custom component as well but then i need to write the complete expand/collapse functionality.

I just need to change the css of the existing behaviour, and i dont want the behaviour of icon that happens on mouse hover. Please suggest.

Thanks,
Ankit

jdkhamba
16 May 2015, 5:47 PM
Have you tried adding a class to your panel with the cls config and then just overriding the .x-tool-img class? You can do something like:

.your-cls .x-tool-img
{
background-image: url('your-image');

}

AJAIN32
16 May 2015, 7:07 PM
Hi- Thanks For Replying,

I tried this css earlier in my code but i need to change the image in case of expand/collapse and by default it works on one image only and changes the position to refect collapse and expand.
Any way to apply seperate css for expand and collapse ?

Thanks,
Ankit

jdkhamba
16 May 2015, 7:38 PM
Hi- Thanks For Replying,

I tried this css earlier in my code but i need to change the image in case of expand/collapse and by default it works on one image only and changes the position to refect collapse and expand.
Any way to apply seperate css for expand and collapse ?

Thanks,
Ankit

There is no need to apply separate css as ExtJS is automatically adding .x-tool-collapse-top additionally to the <img> tag that belongs to the title header. ExtJS just changes the background position in that case to refer to a different image in the same sprite sheet. so, all you need to do is :
.your-cls .x-tool-img.x-tool-collapse-top
{
background-image: (your-collapsed-image)

}


Note that there is no space between the two classes which denotes that both css classes must be present on the html element in question.

AJAIN32
16 May 2015, 7:48 PM
Thanks a lot for such a quick reply,

It worked :). Just one question - i have used two images for expand & collapse. when i expand it by clicking on image it expands as expected but when i collapse it again it has a small delay by which it is not appearing smooth as by default it shows. Any improvement we can do for that ?

The panel is getting collapsed and then the image changes.

Thanks,
Ankit

jdkhamba
16 May 2015, 7:50 PM
Thanks a lot for such a quick reply,

It worked :). Just one question - i have used two images for expand & collapse. when i expand it by clicking on image it expands as expected but when i collapse it again it has a small delay by which it is not appearing smooth as by default it shows. Any improvement we can do for that ?

The panel is getting collapsed and then the image changes.

Thanks,
Ankit
Yes you can. Do what ExtJS does :) Have both images on one single image sprite. Just have different background positions for collapse and expand states.

AJAIN32
16 May 2015, 7:53 PM
Yes That i can give a try and that should work.

Thanks for your instant help. Appreciated !!

Regards,
Ankit