Results 1 to 5 of 5

Thread: checkbox custom theme sprite: how do I configure the gray vs. colored sprites?

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default Answered: checkbox custom theme sprite: how do I configure the gray vs. colored sprites?

    I am creating a custom theme in ExtJs 5.1, extending ext-theme-crisp. I have replaced default the sprite image used for both the checkbox and the radio button. When I compile the theme, my new sprites are used by the application, so that part is fine.

    However, I noticed that the checkbox sprite is a 2x2, with the colored checkbox variants on the right side and grayscale ones on the left side. In my app, if I do an 'inspect element' on my custom-themed checkbox, I can see from the 'background-position' style that it's pointing only to the grayscale parts of the sprite image when I check and uncheck the box.

    The same thing is true for radio buttons.

    Is there some sort of other option in the theming that configures the gray vs. the colored ones? I have looked, but could not find a sass variable that looked like what I need.

    Thanks for any help.

  2. Focus seems to be working here:

    http://dev.sencha.com/extjs/5.1.0/ex...mes/index.html

    Do you have a fiddle of issue your describing? Is it a checkcolumn?

  3. #2
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22

    Default

    Column one are for non-focused.

    Column two are for focused.

    How would you like to configure them?

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

    Hi The0s. Thank you for the quick reply. Basically I want the colored sprites to appear for all enabled states.

    Even when the checkboxes have the focus, the colored sprites are not used. This is true for the default ext-theme-crisp too, not just my custom one.

    So, from what I am seeing, the colored ones are not used for focused.

  5. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22

    Default

    Focus seems to be working here:

    http://dev.sencha.com/extjs/5.1.0/ex...mes/index.html

    Do you have a fiddle of issue your describing? Is it a checkcolumn?

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

    Thanks for the link The0s.

    I do see that behavior that you are talking about. Now that I understand more about the checkbox sprites, I think that I will make both sets of images in the sprite the same (make them both colored instead of one colored and one grayscale), and then I will use a different indication for focus, such as a box shadow.

    Thanks for your help. This helped me understand; I could not find anything about the sprite layout in the Sencha theme docs.

Similar Threads

  1. Replies: 1
    Last Post: 7 Mar 2014, 2:51 PM
  2. Replies: 1
    Last Post: 13 Feb 2014, 9:45 AM

Posting Permissions

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