1. #1
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Answers
    2
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Question Answered: Font sizing in a button

    Answered: Font sizing in a button


    Hi All,

    I need to render instances of Ext.button.Button without fixed font sizes. By default, an Ext.button.Button has a fixed font size. You can change this font size using CSS or a component UI but this is a static change (one font size for all buttons caught by the CSS selector or using the UI). Instead, I need to change the font size dynamically depending on the height config of the button. Below is an example of the HTML created by Ext.button.Button:

    HTML Code:
    <div id="button-1036" class="x-btn x-btn-theme1-small x-noicon x-btn-noicon x-btn-theme1-small-noicon" style="height: 30px; ">
        <em id="button-1036-btnWrap" class="">
            <button id="button-1036-btnEl" type="button" hidefocus="true" role="button" autocomplete="off" class="x-btn-center" style="height: 22px; ">
                <span id="button-1036-btnInnerEl" class="x-btn-inner" style="height: 22px; line-height: 22px; ">type</span>
                <span id="button-1036-btnIconEl" class="x-btn-icon"></span>
            </button>
        </em>
    </div>
    As you can see, I have created my own UI for this button called 'theme1-small'. Despite the button having a height of 30px, the eventual height of the span holding the text is 22px. This is calculated in the setTargetSize function of the classes layout class, Ext.layout.component.Button, which is marked as private and comes with the warning 'Don't rely on its existence'.

    To set the font-size dynamically for my new type of button, I need to add a font-size css property to the style of the span equal to the line-height, but the only way I can see to do this is to provide an alternate Ext.layout.component.Button class that extends the original and overrides the setTargetSize function. This seems dangerous however given the warnings at the top of the class. Is there an alternate way to do this?

    Cheers

  2. Unfortunately, extending the Button layout would be the only way you could go about this. Check for the font-size and set the height appropriately.

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

      0  

    Default


    Unfortunately, extending the Button layout would be the only way you could go about this. Check for the font-size and set the height appropriately.

  4. #3
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Answers
    2
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default


    Quote Originally Posted by rdougan View Post
    Unfortunately, extending the Button layout would be the only way you could go about this. Check for the font-size and set the height appropriately.
    I thought that might be the answer, thanks for your help.

    Another quick question for you. The problem that I am running into here is a combination of the generated DOM being quite complicated and the need for SASS to be pre-compiled. I can't use the style attribute of the button to achieve my dynamic text sizing because of the complicated DOM structure for the component and the lack of support for selectors in the style attribute. I can't target it with any SASS rules because it has to be pre-compiled.

    These seems to be the last frontier for Ext JS on the UI front. If there is a system devised where the UI can be truly dynamic, then this problem goes away. I wonder if the solution is something like less which, I believe, can handle client side compilation of rules at runtime.

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

      0  

    Default


    There is no reason why you cannot add some styling to your button. You would simply need to extend Ext.Button to include a "font size" configuration which would add the correct font-size to the DOM.

    Checkout the renderTpl inside Ext.Button. You just need to pass the renderData into that and style accordingly. You also need to ensure you have removed any 'font-size' styling in the SCSS.

Thread Participants: 1