extjs6 主题指南 - 无法识别混合答案

【问题标题】：extjs6 theming guide - mixing not being recognizedextjs6 主题指南 - 无法识别混合
【发布时间】：2018-03-20 20:21:41
【问题描述】：

我正在遵循 ExtJS6 主题指南并在面板上创建我的第一个 mixin。我在 packages/local/my-classic-theme2/sass/var/panel/Panel.scss 创建了一个主题运行时面板未更改，并且出现以下错误。在 panel.scss 中显示未声明的 mixin。

sencha app watch 图片错误

我错过了一步吗？

@include extjs-panel-ui(
    $ui: 'highlight-framed',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: white
);

我把它放在实际的面板上

ui: 'highlight',
frame: true,

【问题讨论】：

这确实做了一些事情......面板标题变小了，但一切仍然是默认的蓝色。即使我说红色。有原因吗？（我把mixin放在上面）

标签： css extjs mixins extjs6

【解决方案1】：

这就是我所做的：

使用以下命令创建了一个新应用

sencha -sdk <path to ext 6.0.2> generate app -ext MyApp MyTestApp

cd MyTestApp

sencha generate theme --extend theme-classic my-classic-theme2

在packages/local/my-classic-theme2/sass/src 内创建了文件夹panel，并在该文件夹内创建了一个文件Panel.scss。

编辑该文件并按原样粘贴您的代码：

@include extjs-panel-ui(
    $ui: 'highlight-framed',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: white
);

编辑了classic/src/view/main/Main.js 文件并将项目块替换为：

items: [{
    title: 'Home',
    iconCls: 'fa-home',
    // The following grid shares a store with the classic version's grid as well!
    items: [{
        xtype: 'mainlist'
    }]
}, {
    title: 'Users',
    iconCls: 'fa-user',
    items : [{
        xtype: 'panel',
        frame: true,
        ui: 'highlight',
        title: 'Testing my highlight panel',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Foo',
            value: 'Bar'
        }]
    }]
}]

最后编辑app.json 并确保我的"theme" 指向my-classic-theme2

跑了sencha app watch又去了http://localhost:1841

“我的用户”选项卡显示了带有红色标题的面板。

【讨论】：