extjs 4主题如何使用全局变量来创建自定义组件

Question

我正在尝试为ExtJS 4创建一个自定义主题，更复杂的只是改变基色。所以这可能是关于SASS的问题而不是主题本身。

ExtJS为其所有组件声明了mixins，但对于其中许多组件，mixin没有参数。

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

例如，这是菜单mixin。如您所见，他们没有使用mixin参数;相反，他们正在使用影响所有菜单的全局变量。

因此，为了修改此组件，我正在执行以下操作：

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

但是，如果您的应用中有多个菜单，并且每个菜单都需要不同的外观，会发生什么。有什么想法吗？

我的想法是用我的更改创建一个mixin并调用ext-menu mixin，但我不确定在mixin中声明$menu-background-color: red是否会影响全局变量。

Answer 1

在.sass文件中，执行以下操作：

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

在您的JS代码中，只需将cls: 'my-menu'分配给Ext.menu.Menu。