1. #1
    Sencha User
    Join Date
    Jul 2009
    Location
    Austin, TX
    Posts
    47
    Vote Rating
    0
    slsmithtx is on a distinguished road

      0  

    Default Custom Button Scales

    Custom Button Scales


    This may be common knowledge, but I just discovered it and thought I'd pass it on. What I found is that it's very easy to create new scale values for your buttons, so you aren't limited to the sizes set by the "small", "medium" and "large" scales that Ext provides. The only thing Ext uses the scale value for is to set the class names used by the button. So if you search ext-all.css for the class names "x-btn-medium" and "x-btn-icon-medium" you'll find the classes used by the medium scale:
    Code:
    .x-btn-noicon .x-btn-medium .x-btn-text{
        height: 24px;
    }
    .x-btn-icon .x-btn-medium .x-btn-text{
        height: 24px;
        width: 24px;
    }
    .x-btn-text-icon .x-btn-icon-medium-left .x-btn-text{
        background-position: 0 center;
        background-repeat: no-repeat;
        padding-left:26px;
        height:24px;
    }
    .x-btn-text-icon .x-btn-icon-medium-top .x-btn-text{
        background-position: center 0;
        background-repeat: no-repeat;
        padding-top:26px;
    }
    .x-btn-text-icon .x-btn-icon-medium-right .x-btn-text{
        background-position: right center;
        background-repeat: no-repeat;
        padding-right:26px;
        height:24px;
    }
    .x-btn-text-icon .x-btn-icon-medium-bottom .x-btn-text{
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom:26px;
    }
    Copy those into your own CSS file and change "medium" to whatever name you like. Then modify the height, width, and padding attributes to create a button with the size you need.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for sharing.

    Regards,
    Scott.

Thread Participants: 1

Tags for this Thread