View Full Version : ExtJS 3.0 button styling

21 Jul 2009, 10:49 AM
The button style on the ExtJS 2.0 examples I've downloaded looks nice, but on the ExtJS 3.0 code, it is just text without a mouseover effect.

from my page:

text: 'Say Hello',
cls: 'x-form-toolbar-standardButton',
handler: this.onSayHello,
scope: this
text: 'Alert',
cls: 'x-form-toolbar-standardButton',
handler: this.alert,
scope: this

The .css style that I found elsewhere are:

/* This gives toolbar buttons with cls: x-form-toolbar-standardButton the regular button style */
.x-toolbar.x-form-toolbar-standardButton.x-btn-left { background: url(resources/images/default/button/btn-sprite.gif)no-repeat0px0px;}
.x-toolbar.x-form-toolbar-standardButton.x-btn-center { background: url(resources/images/default/button/btn-sprite.gif)repeat-x0px-42px; text-align: center;}
.x-toolbar.x-form-toolbar-standardButton.x-btn-right { background: url(resources/images/default/button/btn-sprite.gif)no-repeat0px-21px;}
.x-toolbar.x-form-toolbar-standardButton.x-btn-over.x-btn-left{ background: url(resources/images/default/button/btn-sprite.gif)no-repeat0px-63px;}
.x-toolbar.x-form-toolbar-standardButton.x-btn-over.x-btn-center{ background: url(resources/images/default/button/btn-sprite.gif)repeat-x0px-105px;}
.x-toolbar.x-form-toolbar-standardButton.x-btn-over.x-btn-right{ background: url(resources/images/default/button/btn-sprite.gif)no-repeat0px-84px;}
.x-toolbar.x-form-toolbar-standardButton.x-btn-click.x-btn-center, .x-btn-menu-active.x-btn-center{ background-position:0-126px; }
/* end block */
But if I browse the rendered button, its style is: x-btn-text

so it seems like I am not getting the right style specified. What is wrong here.

21 Jul 2009, 10:59 AM
Are you sure you updated all the CSS and cleared your cache? The examples here http://extjs.com/deploy/dev/examples/samples.html all show mouseover effects on buttons.

21 Jul 2009, 12:50 PM
They show a lot of buttons in the example, but they all have fancy features like icons that I don't want. I just want a button.

I do get a mouseover "hand" but that's it. I'd also like the button to look like a button BEFORE it is moused over. All of the examples have the button looking like text, which is fine for a toolbar, but not inside a form.

21 Jul 2009, 1:20 PM
What happens if you remove the cls: 'x-form-toolbar-standardButton' from your button config?

21 Jul 2009, 4:35 PM
I found the problem. I had updated a prior ExtJS 2.0 project to 3.0 and one of the image folders (the buttons only) was not copied correctly.

Now that the images are there, the buttons look great.

19 Oct 2009, 8:38 AM
I am facing the same problem. I want a button to look like a button before mouse over.

Can you let me know which folder are you talking about and where should I look for it.

19 Oct 2009, 8:40 AM
I have a toolbar containing a button and I want it to look like a button before mouse over .

19 Oct 2009, 10:03 PM
I am not sure what I did before to make buttons appear as buttons in the toolbar. My code was extremely raw at the time.

I still have this problem on a couple of my toolbars.

Very often I just don't use toolbars if I want my buttons to stand out.

19 Oct 2009, 10:49 PM
I agree. It's not good.