Results 1 to 7 of 7

Thread: Panel Header Collapsible Icon Css Override

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default Answered: Panel Header Collapsible Icon Css Override

    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

  2. Quote Originally Posted by AJAIN32 View Post
    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.

  3. #2
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    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');

    }


  4. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  5. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Quote Originally Posted by AJAIN32 View Post
    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.

  6. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  7. #6
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Quote Originally Posted by AJAIN32 View Post
    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.

  8. #7
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Yes That i can give a try and that should work.

    Thanks for your instant help. Appreciated !!

    Regards,
    Ankit

Similar Threads

  1. Collapsible panel icon on left
    By accent.atul in forum Ext: Discussion
    Replies: 3
    Last Post: 28 Jan 2013, 12:51 PM
  2. Collapsible Panel icon
    By matejka in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 15 Nov 2010, 12:10 PM
  3. Replies: 3
    Last Post: 16 Jul 2009, 3:49 PM
  4. collapsible icon on Toolbar Panel
    By nominus in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 29 Jun 2008, 1:04 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •