View Full Version : Font sizing in a button

30 Aug 2011, 7:41 PM
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:

<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>

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?


1 Sep 2011, 2:48 PM
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.

1 Sep 2011, 7:23 PM
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 (http://lesscss.org/) which, I believe, can handle client side compilation of rules at runtime.

1 Sep 2011, 7:38 PM
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.