PDA

View Full Version : Scoped themes in ExtJS 4.2?



ontho
16 Apr 2013, 11:11 AM
Hello!

I want to upgrade from ExtJS 4.1.3 to 4.2., but I need a scoped grey theme. I used this guide to COMPILE such a theme before 4.2.: http://www.sencha.com/learn/theming/
But this doesn't seem to work anymore, I get errors like "You must compile individual stylesheets from the project directory."

For 4.2., I found: http://docs.sencha.com/extjs/4.2.0/#!/guide/theming (http://docs.sencha.com/extjs/4.2.0/#%21/guide/theming)
But there is nothing in it about scoped themes at all. And I couldn't find any scoped themes in 4.2. anyway - are they gone for some reason? Any "How-Tos" on making scoped themes in 4.2?

mashiki
4 Jun 2013, 10:02 AM
I want to use 4.2's ext-scoped-all.css OR to know how to?make it with sencha SDK.

Pleeeeese tel us how to do these! :-/

ontho
4 Jun 2013, 11:56 AM
I managed to do it, but - depending on what other CSSs are included into the html-document - you might need to repeat this for every single css-id you want to address which can make css-file quite large:

The steps are:
1. Create an scss-file like:


#parent-element {
@import "ext-theme-gray-all.scss"
}


2. COMPILE the file (see links in my first post).

3. Insert a reset-css to the front of the generated css-file, like:


#parent-element div,
#parent-element span,
#parent-element applet,
#parent-element object,
#parent-element iframe,
#parent-element h1,
#parent-element h2,
#parent-element h3,
#parent-element h4,
#parent-element h5,
#parent-element h6,
#parent-element p,
#parent-element blockquote,
#parent-element pre,
#parent-element a,
#parent-element abbr,
#parent-element acronym,
#parent-element address,
#parent-element big,
#parent-element cite,
#parent-element code,
#parent-element del,
#parent-element dfn,
#parent-element em,
#parent-element font,
#parent-element img,
#parent-element ins,
#parent-element kbd,
#parent-element q,
#parent-element s,
#parent-element samp,
#parent-element small,
#parent-element strike,
#parent-element strong,
#parent-element sub,
#parent-element sup,
#parent-element tt,
#parent-element var,
#parent-element b,
#parent-element u,
#parent-element i,
#parent-element center,
#parent-element dl,
#parent-element dt,
#parent-element dd,
#parent-element ol,
#parent-element ul,
#parent-element li,
#parent-element fieldset,
#parent-element form,
#parent-element label,
#parent-element legend,
#parent-element table,
#parent-element caption,
#parent-element tbody,
#parent-element tfoot,
#parent-element thead,
#parent-element tr,
#parent-element th,
#parent-element td,
#parent-element table tr,
#parent-element table th,
#parent-element table td,
#parent-element input,
#parent-element select,
#parent-element textarea
{
background:none;
border:none;
border-collapse:separate;
border-spacing:0;
bottom:auto;
clear:none;
color:#000000;
cursor:default;
display:auto;
empty-cells:show;
float:none;
font-family:Arial, Helvetica, sans-serif;
font-size:auto;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
margin: 0;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
padding: 0;
position:static;
right:auto;
table-layout:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
/*width:auto; Some strange things in FF?!*/
z-index:auto;
}


4. Use the created css-file instead of the ExtJs-css-file and put everything concering ExtJs into a div like <div id="parent-element">... ExtJs-Components render here... </div>.



Another approach is to use a .x-reset definition. Like:

1. Take the original CSS.

2. Do these replacements:


$sCss = str_replace("img{border:0}", ".x-reset img{border:0}", $sCss);
$sCss = str_replace(".x-border-box *", ".x-reset *", $sCss);


3. Add to your javascript code:


Ext.override(Ext.AbstractComponent,
{ componentCls: 'x-reset'
});


But keep in mind that every #-id-selector appearing in other CSS included into the html-document might overwrite anything you defined as .x-reset.

Warning: This is all not documented or featured by ExtJs, so I have no idea if this will work in your case, in every browser or even after the next update.

mashiki
5 Jun 2013, 10:24 PM
Thank you.

I tried your 2nd advice and got a respected result.

Our project can now use 4.2.1.

And next time I try to your 1st advice, because I want to use minimized css too to get more speed.

Meixger
9 Jun 2013, 3:11 AM
from Introducing Ext JS 4.2 http://www.sencha.com/blog/introducing-ext-js-4-2/

"[..] These changes ranged from removing the CSS reset (its numerous “expensive” rules to reset, scope reset and unreset),[..]"

mashiki
10 Jun 2013, 10:37 PM
Do I hear that "scoped" has already become unnecessary in 4.2?

Meixger
18 Jun 2013, 12:41 AM
Do I hear that "scoped" has already become unnecessary in 4.2?

I don't think so – without "scoped" themes Twitter BootStrap will confligt with ExtJS :(