PDA

View Full Version : Extjs vs SASS



rsqw
8 Jan 2012, 12:38 PM
HI,

I have few questions about sass support in extjs.
1. In extjs there is a Ext.TabPanel, but I can't find extjs-tabpanel-ui - mixin, why?
2. I need Ext.form.field.Text with border-radius, how can I implement this?

Also, I will be very glad to know, what are the best practices for theming extjs,
because almost all ui-mixins don't have needed attributes. e.g: background-image etc...

And one more:
I've tried to add styles for extjs-tabpanel via variables e.g:
$tab-background,
$tab-background-over
and so on..., but these variables are never used in extjs, is this is a bug?

Here is search-result from my SublimeText:
Searching 70 files for "$tab-background-over"


/root/www/extjs/sass/js/lib/extjs/resources/themes/stylesheets/ext4/default/variables/_tabs.scss:
10
11 $tab-background: $tab-base-color !default;
12: $tab-background-over: $tab-base-color-over !default;
13 $tab-background-active: $tab-base-color-active !default;
14 $tab-background-disabled: $tab-base-color-disabled !default;


1 match in 1 file



Any ideas?

Many Thanks!!!

mitchellsimoens
9 Jan 2012, 8:26 AM
If a particular mixin doesn't do what you want then don't use it or use it and add the rules you need.

vadimv
9 Jan 2012, 9:07 AM
HI,


I've tried to add styles for extjs-tabpanel via variables e.g:
$tab-background,
$tab-background-over
and so on..., but these variables are never used in extjs, is this is a bug?

have you placed them above the includes, if not then this could be the reason.

rsqw
9 Jan 2012, 9:17 AM
vadimv (http://www.sencha.com/forum/member.php?185368-vadimv),
thanks for reply,

it doesn't matter where I place these variables, because extjs doesn't use them :(

rsqw
9 Jan 2012, 9:25 AM
mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)

Unfortunately, all default-mixins extjs-sass can't help me in real projects, so I think sass in extjs -> sucks, Are your proposition is to rewrite the whole extjs-compass framework ?????

mitchellsimoens
9 Jan 2012, 9:47 AM
Never said you have to rewrite anything. If something doesn't do what you want, then you only need to write your own SASS for what you need.

rsqw
9 Jan 2012, 9:58 AM
ok, and what about best practices for theming extjs in real applications? this will be really cool :)

vadimv
9 Jan 2012, 10:37 AM
vadimv (http://www.sencha.com/forum/member.php?185368-vadimv),
thanks for reply,

it doesn't matter where I place these variables, because extjs doesn't use them :(
actually it matters, 'cause if you place below the includes then they will have default values, not yours. I'm woking with extjs theming with sass since its beginning, tuned 2 apps already, and never had such problems like yours. Recently tested slice generator and worked too, is not complete yet(talking about mixins), I had only to add an workaround to the 'utils.rb' file for a bug found in 4.0.2 which they still have it in 4.0.7.

Vadim.

rsqw
9 Jan 2012, 11:04 AM
vadimv (http://www.sencha.com/forum/member.php?185368-vadimv),

I complete agree with you about variables, I know that I should place them above ext-variables, but such variables as:


$tab-background
$tab-background-over
$tab-background-active
$tab-background-disabled

are unused in ExtJS --> this is my question.


About your apps, vadimv (http://www.sencha.com/forum/member.php?185368-vadimv), can you send screenshots, sass-code of your apps, please, because for me it's very difficult to style my app :((((((((


Many Thanks

vadimv
9 Jan 2012, 11:40 AM
vadimv (http://www.sencha.com/forum/member.php?185368-vadimv),

I complete agree with you about variables, I know that I should place them above ext-variables, but such variables as:


$tab-background
$tab-background-over
$tab-background-active
$tab-background-disabled

are unused in ExtJS --> this is my question.

not, ext-variables but above all includes, for example:


$button-toolbar-color: #fff;


// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;


regarding screenshots, no I can't. Regarding sass code, you have it already in extjs package, for example gray theme, with mixins there is an example in the docs.

cheers,
Vadim