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:
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'.
<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>
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?