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;
  }
  ...
}

例如，这是菜单混合器。正如您所看到的，它们没有使用混合器参数；相反，它们正在使用影响所有菜单的全局变量。

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

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

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

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

- Giancarlo Corzo

Answer 1

在你的 .sass 文件中，可以这样做：

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

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

- mistaecko