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

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

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

但是当您的应用程序中有多个菜单并且您希望每个菜单具有不同的外观时会发生什么。有任何想法吗？

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

Answer 1

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

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

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