1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    dbadke is on a distinguished road

      0  

    Default Toggle button: change button icon when pressed?

    Toggle button: change button icon when pressed?


    I have a toolbar button with toggling enabled:
    Code:
    tb.addButton({
        text: '',
        tooltip: 'Enable filter',
        cls: 'x-btn-icon filter-btn',
        enableToggle: true,
        toggleHandler: this.toggleFilter,
        scope: this}));
    This works OK, but I want to have a different icon when the button is in the pressed state. I tried to do the CSS the same way as for disabled buttons:
    Code:
    .filter-btn .x-btn-text {
       background-image: url('../images/filter.gif');
    }
    
    .x-item-disabled .filter-btn .x-btn-text {
       background-image: url('../images/filter-cold.gif');
    }
    
    .x-btn-pressed .filter-btn .x-btn-text {
       background-image: url('../images/filter-on.gif');
    }
    This does not work; the icon doesn't change.

    I watched the button in Firebug as the button was toggled, and saw that .x-btn-pressed was added to the button table element when in pressed state, where .x-item-disabled is added to the td element that is the parent of the table element. I tried a variety of CSS chains for the pressed state, without success.

    So, is there any way to have a "pressed" icon in a way similar to how we can have a "disabled" icon?
    David Badke
    Humanities Computing and Media Centre
    University of Victoria, BC, Canada

  2. #2
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Try:

    Code:
    .x-btn-pressed.filter-btn .x-btn-text {
      background-image: url('../images/filter-on.gif'); 
    }
    The difference is there's no space between the .x-btn-pressed and .filter-btn classes. The reason for that is that these are classes applied to the same element so they must be chained together like this. Essentially it means, apply these style definitions to all elements with a class of .x-btn-text that are descendants of all elements that have both the .x-btn-pressed class and the .filter-btn class applied.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    dbadke is on a distinguished road

      0  

    Default


    Thanks. That works!
    David Badke
    Humanities Computing and Media Centre
    University of Victoria, BC, Canada

Similar Threads

  1. Ext.BasicDialog , button with icon issue
    By nseb in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 8 Apr 2011, 9:13 AM
  2. change treeNodes Icon after tree render??
    By omid in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 15 Dec 2009, 8:32 AM
  3. Button of Confirm
    By francescotorres in forum Community Discussion
    Replies: 0
    Last Post: 16 Mar 2007, 6:46 PM
  4. Replies: 2
    Last Post: 11 Dec 2006, 5:38 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar