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 参数；相反，他们使用影响所有菜单的全局变量。

所以为了修改这个组件，我做了以下事情：

$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。