extjs 4 themes how to use global variables to create custom components

Question

I'm trying to create a custom theme for ExtJS 4, more complex that just changing the base color. So probably this is more a question about SASS than the theme itself.

ExtJS declares mixins for all its components, but for many of these the mixin has no parameters.

@mixin extjs-menu {
  .#{$prefix}menu-body {
      @include no-select;
      background: $menu-background-color !important;
      padding: $menu-padding;
  }
  ...
}

For example, this is the menu mixin. As you can see, they are not using mixin parameters; instead, they are using the global variables that affect all menus.

So to modify this component I was doing the following:

$menu-background-color: red;
@include ext-menu

But what happens when you have several menus in your app and you want different looks for each. Any ideas?

My idea was to create a mixin with my changes and call the ext-menu mixin, but I'm not sure if declaring $menu-background-color: red inside the mixin will affect the global variable or not.

mistaecko · Accepted Answer · 2012-08-26 13:52:37Z

1

In you .sass file, do something like this:

.my-menu {
  @include extjs-menu;
}

In your JS code, just assign cls: 'my-menu' to the Ext.menu.Menu.

answered Aug 26, 2012 at 13:52

mistaecko

2,6851 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

extjs 4 themes how to use global variables to create custom components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related