1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    100
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default Extjs vs SASS

    Extjs vs SASS


    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!!!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If a particular mixin doesn't do what you want then don't use it or use it and add the rules you need.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    Quote Originally Posted by rsqw View Post
    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.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    100
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default


    vadimv,
    thanks for reply,

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

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    100
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default


    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 ?????

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    100
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default


    ok, and what about best practices for theming extjs in real applications? this will be really cool

  8. #8
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    Quote Originally Posted by rsqw View Post
    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.

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    100
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default


    vadimv,

    I complete agree with you about variables, I know that I should place them above ext-variables, but such variables as:
    Code:
    $tab-background
    $tab-background-over
    $tab-background-active
    $tab-background-disabled
    are unused in ExtJS --> this is my question.


    About your apps, vadimv, can you send screenshots, sass-code of your apps, please, because for me it's very difficult to style my app ((((((


    Many Thanks

  10. #10
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    Quote Originally Posted by rsqw View Post
    vadimv,

    I complete agree with you about variables, I know that I should place them above ext-variables, but such variables as:
    Code:
    $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:
    Code:
    $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

Thread Participants: 2

Tags for this Thread