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

Question

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

ExtJS 为其所有组件声明了 mixin，但对于其中许多组件，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。