4.1.1 to 4.2.0/4.2.1b1 - Toolbar Button styling

[myExtJsUname]

I've just started looking into upgrading our application from 4.1.1 to 4.2.0 (and 4.2.1 using the beta currently available). There are a number of styling issues in doing so, but I'll create this thread to deal with one and, hopefully, learning what's necessary to get that looking correctly again will help me figure out the others.

Our organization requires us to use a template to display our web-mapping application within and, in order to avoid styling conflicts in 4.1.1, we are using the "ext-all-scoped.css". I see from this thread, http://www.sencha.com/forum/showthread.php?260608, that that is no longer available because "In Ext 4.2 most of the the global CSS reset rules were removed, and so scoped CSS was removed since the hope was that it would no longer be needed..."

Okay. So I've switched to use the "ext-theme-classic-all.css", but the styling for the Toolbar buttons is completely different and, really doesn't seem to be applied at all. I tried the suggested fix in that thread (overriding the AbstractComponents initStyles and removing 'border-box' class) but don't see any difference. I also tried the 4.2.1 beta with no resulting improvement either.

I'll attached a couple pictures to show the difference. In these examples, I've completely removed our organization's template and only have the ExtJs portion of the page included. That is, there is a single DIV in the BODY that the application is rendered to. The first image shows how the toolbar buttons look in 4.1.1; the second shows the same button in 4.2.0 and 4.2.1.

43510 43511

In looking at the styling for this element, I see that in 4.1.1, there seems to be a lot of relevant styling attached to the BUTTON tag that is no longer there in 4.2.0/4.2.1. You can see the differences in the following two Firebug images (again, the first is the 4.1.1 page; the second is 4.2.0):

43512

43513

Is there some fundamental thing that I'm supposed to be setting or doing somewhere that I'm unaware of? I haven't seen anything in the forums along those lines, but perhaps I'm just not using the correct search terms.

Any pointers (including just to some relevant documentation) would be appreciated.

Cheers,
jtm

[myExtJsUname]

Wait a second...this may be (is probably) related to a Button override that's in our application that changed the renderTpl slightly in 4.1.1. I can see now that the Button's renderTpl in 4.2.0 is significantly different from what it was in 4.1.1, so I'll have to revisit this and see how to change it now to get the same enhancement we had before.

I'm guessing this is the root of my other problems as well because another thing that wasn't displaying properly was the tools in the upper-right of a Panel. That's another renderTpl we overrode.

I'll let you know how things turn out...sorry for wasting your time with the reading of these posts if this type of thing is all they turn out to be.

Cheer,s
jtm

[myExtJsUname]

Yup! This is my problem...although it highlights a shortcoming in an approach we have adopted in the past.

I'll likely start a new thread shortly with a specific example to gain some insight into the proper approach for doing what we are doing moving forward.

Cheers,
jtm