Results 1 to 2 of 2

Thread: Custom Button Scales

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Location
    Austin, TX
    Posts
    47
    Vote Rating
    0
      0  

    Default 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,390
    Vote Rating
    498
      0  

    Default

    Thank you for sharing.

    Regards,
    Scott.

Tags for this Thread

Posting Permissions

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