PDA

View Full Version : Theming Extjs



Entropy
3 Oct 2011, 6:59 AM
I am trying to apply a custom theme to extjs and having a few problems. First, any chance ext produces an ext-variant version of jQuery's Theme roller? One that renders all the proper CSS overrides? Because that would be SWEET.

Anyway, I am changing the panel headers (which works), and buttons right now, and my changes seem to have taken in Firefox, but are not working properly in IE 8. I'm no CSS genius, but it seems to me that I am doing the right things (especially since Firefox agrees).


.x-btn {
color: #000000 !important;
background: url(../images/ui-bg_glass_75_c0c0c0_1x400.png) center left repeat-x !important;
border-radius: 5px;
border-color: #000000 !important;
border-style: solid;
border-width: 1px;
}

border-radius is not supported by IE 8, but I tried without it, and it didn't help. The above clearly is picked up by IE because the background changes, but the buttons don't show a border, AND the file upload control in particular is reacting badly. It renders a gray square (not my image) with no text, and a sliver of something below it that reacts to rollovers (making me think this is a z-index issue). The gray square has a white top border.

I tried also overriding ".x-btn .x-form-file-btn", to no effect. Ideas?

Also is there a good general resource of theming ext? Maybe a document that says "If you want to change the style of whatever, override .x-whatever-something-else"? I've been using firebug and examining styles which is about what the document I found suggested.

carol.ext
3 Oct 2011, 7:34 AM
Take a look at the Theming Guide (http://docs.sencha.com/ext-js/4-0/#!/guide/theming). There is a section called "Legacy Browsers" (be sure to download the Sencha SDK Tools from the ExtJS 4.0 download page before trying to run the commands in that section). There is also a Theming video, note that it includes some things that did not make it into 4.0.

Be sure to check out the Sencha SDK Tools forum (http://www.sencha.com/forum/forumdisplay.php?8-Sencha-SDK-Tools).

skirtle
3 Oct 2011, 4:21 PM
Components like buttons that use border-radius are quite tricky to restyle using CSS alone. In browsers that don't support border-radius, such as IE6-8, ExtJS uses a 3x3 frame around the component to inject the necessary images to give the same effect. This works fine but it means that the markup and CSS for those components is quite different in those browsers. If you use the SASS/Compass theming resources (as linked by carol.ext) it will generate the necessary CSS and images to handle those browsers for you. Otherwise you'd have to do it manually.

Entropy
4 Oct 2011, 3:25 AM
First, thanks for the link to the theming guide. I'll be playing with that.

On the border-radius, I know that it won't be supported everywhere. But that is not what I am confused about, it's the file upload control's buton which is ignoring all styling and deforming to a gray blob, and the regular border outline which is completely missing. Both these issues are IE only. I took the border-radius out to see if the unknown tag was causing IE to barf, but that didn't help.

Entropy
4 Oct 2011, 5:11 AM
Interestingly, generated my first theme with compass, and IE ignores it. It took part of it, but the panel headers are all he default image. Still playing with it, because all I set was the base-color, but firefox's panels reflect the base color, IE 8 does not.

MatthiasG
4 Oct 2011, 7:58 AM
Are you generating the images with the sdk tools? If you do, do you have all the folders in your themes image folder?

The sdk tool isn't capable to generate all the images right now, but according to Sencha you can copy the missing images from the default theme. For me, this has never work since the generated css files doesn't include the search path for images not generated by my own theme.

Entropy
4 Oct 2011, 11:13 AM
Are you generating the images with the sdk tools?

I followed the linked tutorial above. If that is what you mean, then yes.


If you do, do you have all the folders in your themes image folder?

Yes. From boundlist to window-header.


The sdk tool isn't capable to generate all the images right now, but according to Sencha you can copy the missing images from the default theme. For me, this has never work since the generated css files doesn't include the search path for images not generated by my own theme.

Hmm, so in IE, it is probably using background-image instead of css stuff, so the lack of a generated image is why it didn't work maybe? So if I took my Themeroller image and snuck i in under the right name/folder, that should satisfy it and make it work? I'll try that, I suppose. Thanks.

carol.ext
4 Oct 2011, 12:53 PM
I followed the linked tutorial above. If that is what you mean, then yes.


Specifically, generating the images is in the legacy browswer section



Supporting Legacy Browsers

In most cases when creating new UI's, you will want to include background gradients or rounded corners. Unfortunately legacy browsers do not support the corresponding CSS3 properties, so we must use images instead.

With Ext JS 4, we have included a Slicing tool which does the hard work for you. Simply pass it a manifest file of your new UI's (if you have created any) and run the tool from the command line.
How it works

The slicing tool creates a new browser instance, which loads Ext JS and a specified CSS file. Once loaded, it parses a JavaScript file which includes every Ext JS component that needs styling (panel, window, toolbar, etc.). It then analyzes each of those components and determines the size and location of each image that needs to be sliced. It then slices each of the images, sprites them together and saves them in the location defined in the manifest.

The slicer too itself can be run from the command line and is installed as part of the SDK Tools package. It can be run by calling sencha slice theme. Example usage (assuming you are in your application root directory):

sencha slice theme -d extjs -c resources/css/my-ext-theme.css -o resources/images -v
...
...

jeffj@sstelco.com
12 Mar 2012, 11:46 PM
I tried very hard to follow the theming guide, but the results are not good:

First, the first compass compile generated an error (my-ext-themes.scss (Line 115 of _frame.scss: Functions may only be defined at the root of a document.)

It does output ./css/my-ext-theme.css, but the first few lines of that file say:

/*
Syntax error: Functions may only be defined at the root of a document.
on line 115 of C:/xampp/htdocs/kilwinsbeta/extjs/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
from line 4 of C:/xampp/htdocs/kilwinsbeta/extjs/resources/themes/stylesheets/ext4/default/_mixins.scss
from line 9 of C:/xampp/htdocs/kilwinsbeta/extjs/resources/themes/stylesheets/ext4/default/_all.scss
from line 8 of C:/xampp/htdocs/kilwinsbeta/resources/sass/my-ext-theme.scss

Followed by a back trace.

I will start over tomorrow and try again to follow the guide. Does anyone have any experience to suggest what I am doing incorrectly?

Thanks,
Jeff

toxkillfraex
13 Mar 2012, 1:07 AM
I tried very hard to follow the theming guide, but the results are not good:

First, the first compass compile generated an error (my-ext-themes.scss (Line 115 of _frame.scss: Functions may only be defined at the root of a document.)

It does output ./css/my-ext-theme.css, but the first few lines of that file say:

/*
Syntax error: Functions may only be defined at the root of a document.
on line 115 of C:/xampp/htdocs/kilwinsbeta/extjs/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
from line 4 of C:/xampp/htdocs/kilwinsbeta/extjs/resources/themes/stylesheets/ext4/default/_mixins.scss
from line 9 of C:/xampp/htdocs/kilwinsbeta/extjs/resources/themes/stylesheets/ext4/default/_all.scss
from line 8 of C:/xampp/htdocs/kilwinsbeta/resources/sass/my-ext-theme.scss

Followed by a back trace.

I will start over tomorrow and try again to follow the guide. Does anyone have any experience to suggest what I am doing incorrectly?

Thanks,
Jeff

you're not doing anything incorrectly Sass stopped support of a certain type of function which causes that error.
The best option is to roll back to an older version.
I found the solution in this thread.

http://www.sencha.com/forum/showthread.php?149266-Theming-issue-Line-15-Functions-may-only-be-defined...

One thing I have noticed with custom themes is that rounded corners on panels give errors of missing images en masse... Though that might be me, but I kinda doubt it.

also for theming you define the $base-color: variable for a start in the sass file you copy following that theming tutorial(I personally use photoshop as a color picker but there are enough random plugin's on the web to help you with that that give hex colors in return)

usually there will be a bunch of elements that don't get themed with just that (though the result is already quite visible). If you follow the tutorial you should be able to find other sass variables in 'yourExtjsfolder/resources/themes/stylesheets/ext4/default/variables' yourExtjsfolder being the name of the ext folder you have in your project.

You can do allot without getting into custom UI's

good luck with this at least =3