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 mistaecko · Accepted Answer · 2012-08-26T13:52:37

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.

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

1 Answers