PDA

View Full Version : Styling a button not working



frank.zammetti
25 Oct 2011, 1:34 PM
Hi all... Ok, feeling pretty stupid here... working on upgrading an ExtJS 3.x app to 4.0.6 and running into a problem styling things... now, I know all about SASS and Compass and all that, but that's a heavy lift for an upgrade exercise so I'm trying to avoid it.

So, here's an example... I have a simple button:


{ xtype : "button", width : 100, text : "My Button",
handler : function() { }
}

Nothing fancy obviously. This is embedded in a Panel using a TableLayout inside a TabPanel in the center region of the viewport using a BorderLayout. What I want is simply for the text to be bold.

Now, in 3.x, we simply do:


.x-btn button {
font-weight : bold;
}

That's all it took, button text is bold, good to go. But under 4.x, that doesn't seem to work. I dug through the CSS via Firebug and tried a number of things:


.x-btn-inner {
font-weight : bold;
color : #ff0000;
}
.x-btn-inner button {
font-weight : bold;
color : #ff0000;
}
.x-btn {
font-weight : bold;
color : #ff0000;
}

I didn't really expect the second and third one to work, but that first one especially I really don't understand not working because that's the lowest level styled based on the markup and it sure looks to me like it should override anything else that comes before it regardless. And yes, the obvious mistake of importing the Ext stylesheet after my own I already checked for, I'm good there :) There's no other stylesheets imported, no other inline styles anywhere. Worse still, the computed style APPEARS to be 700 (bold) in Firebug, but its not reflected on the screen so I'm half wondering if I'm misreading the computed styles somehow.

Worse still, trying to apply style directly to the button via style attribute ALSO doesn't seem to work :(

So, I fully expect I'm missing something simple here since generically styling has been giving me fits all day. Can anyone point it out for me?

Thanks,
Frank

skirtle
25 Oct 2011, 3:37 PM
The problem is specificity. A more specific CSS rule will beat a less specific rule, no matter what order you specify them in. The selector ExtJS uses to style those elements (.x-btn-default-small .x-btn-inner) is more specific than the one you're attempting to use.

If you want to style all buttons you could use the same selector given above. A slightly simpler variation with the same specificity is:


.x-btn .x-btn-inner

If you only want to style some buttons then add a cls to the button (e.g. cls: 'custom') then add that to your specifier:


.custom .x-btn-inner

Another alternative is to use the !important modifier on your styles but generally I'd avoid that where possible.

frank.zammetti
26 Oct 2011, 7:45 AM
Thanks, that did the trick. I'm not ashamed to admit that specificity still trips me up sometimes so I appreciate the help!

Frank

talha06
25 Dec 2014, 9:44 AM
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" (http://stackoverflow.com/questions/12106952/how-to-change-background-of-hovered-and-pressed-extjs-button-dynamically/12118487#12118487) but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.


ExtJS button has 2 configuration for styling according to documentation:
overCls and
pressedCls. Despite I set them both pressedCls configuration did not work for me.


Which css properties should I override/define in order to create my own buttons?

Here is the fiddle I created for : https://fiddle.sencha.com/#fiddle/fim