Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1251 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    12
    Vote Rating
    0
    dw12345 is an unknown quantity at this point

      0  

    Default xtype: 'button' iconMask: false does not remain when button is pressed

    xtype: 'button' iconMask: false does not remain when button is pressed


    I have added my own icons for zoom in and out. setting iconMask to false removes the background-color: 'white'. Which displays the icon correctly.
    {
    xtype: 'button',
    icon: 'images/zoomin24.png',
    iconMask: false,
    itemId: 'zin',
    ui: 'plain',
    align: 'right'
    }

    However the background-color: 'white' is restored once the button is pressed. This shows up as a white box surrounding the icon. This can be recreated by adding x-button-pressed to the config.

    {
    xtype: 'button',
    cls: 'x-button-pressed',
    icon: 'images/zoomin24.png',
    iconMask: false,
    itemId: 'zin',
    ui: 'plain',
    align: 'right'
    }

    I think once the iconMask set to false it should also apply when the button is pressed. Is this an incorrect assumption? I would like my custom icons to behave the same as the default icons. This does not work in 1.1 either.

    Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Vote Rating
    853
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Looks like 'x-button-pressed' is setting a white background for me. Further more, after I press the button, the 'x-button-press' CSS is removed as expected so I'm seeing the expected behavior.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    I agree. I've fixed this internally and will be available in the next release.

    For now, you can simply go into button.scss in the Touch SDK and replace line 237:

    Code:
    .x-button-icon {
    With this:

    Code:
    .x-button-icon.x-button-mask {
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    12
    Vote Rating
    0
    dw12345 is an unknown quantity at this point

      0  

    Default


    Thanks I will give that a try.

    I added a local CSS but am not sure of the side effects but it is working

    Code:
    .x-button-icon {
        background-color: transparent !important;
    }

Thread Participants: 2