PDA

View Full Version : [INFOREQ] [ext.4.2.0.489] Objects doesn't have backgrounds - CSS???



Reggae
14 Feb 2013, 11:58 AM
I just tried out the brand-new ext.4.2.0.489 beta-release. Everything works fine, except the look-and-feel either in the classic ext-all-gray theme as in the ext-neptune theme.

My problem is, that a lot of user-interface elements (buttons, grid-columns, windows, context-menus) doesn't have a background anymore, that is they are transparent.

As far as I read in the release-notes, the classic and the neptune-theme extend the neutral-theme but there is no ext-all-neutral.css in the sources so this might be the reason for my problems??

evant
14 Feb 2013, 12:41 PM
Perhaps post a screenshot, I'm not really sure what you mean.

Reggae
15 Feb 2013, 2:43 AM
Hi Evan,

I attached two screenshots.
1st. ExtJs 4.1.1a GPL with ext-all-gray.css
2nd ExtJs 4.2.489-beta with ext-all-gray.css(ext-theme-gray.css)

Reggae
15 Feb 2013, 2:51 AM
Perhaps post a screenshot, I'm not really sure what you mean.4187041871

evant
17 Feb 2013, 4:21 PM
This doesn't happen in the online examples, it looks like you're using custom styling there, it's likely having an impact, difficult to say what.

dongryphon
17 Feb 2013, 4:39 PM
I suspect this issue is coming from changes to the menu styling in 4.2 and how you have customized that styling. Perhaps using the variables provided by the Classic theme (there are many more in 4.2) you can get the result you are after.

Theme inheritance is part of the SASS build process and results in a "flattened" CSS file. The Neutral and Base themes are technically abstract bases in that they depend on variables being defined for which there aren't good defaults. Rather than have them make up something we decided it was best to "force" the derived theme to state its intentions on these.

There are 3 fundamental approaches folks take here to create a theme (the first two are basically the same as 4.1):

1. Add your own CSS around the generated CSS from the framework theme (not recommended in 4.1 or 4.2).
2. Add your own SASS and import the generated "all.scss" file from the framework theme (recommended in 4.1 / supported in 4.2)
3. Create a theme package that derives from the desired theme, customizes variables and extends rules as needed (new to 4.2 / and recommended in 4.2).

I'm not sure which path you are on, but as part of moving to 4.2 I would consider option #3 - it should give you the easiest maintenance and most flexibility for your theme. Both Neptune and Classic are implemented this way (deriving from Neutral) and you can pick one (looks like Classic?) as a starting point for your own.

To get started on that path, you could use Sencha Cmd to generate a theme package or copy "ext-theme-classic", remove the parts you don't need (like most of the ./sass and ./resources folders) and change the package.json properties name, extend and requires.

Apologies that the guides are not yet online for this area - we are working hard to get them refreshed and posted.