如何在 extjs 中正确指定主题变量？答案

【问题标题】：How to properly specify theme variables in extjs?如何在 extjs 中正确指定主题变量？
【发布时间】：2021-01-15 14:14:40
【问题描述】：

我一直在尝试学习 extjs 中的样式，但我不知道它是如何工作的。在一个非常简单的示例中，我想将一些样式应用于面板标题：

app.js

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'MyPanel',
            cls: 'title',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'button',
                text: 'myButton'
            }, {
                html: 'Hello World!!!',
            }]

        })
    }
});

所以，根据documentation，我设法使用以下css文件更改标题background-color：

app.css

.title .x-panel-header {
    background-color: pink;
    color: red;      /* this doesn't work */
    font-size: 22px; /* this doesn't work */  
}

问题是一些主题变量没有正确应用 - 例如，文本颜色或字体大小，尽管这些变量是根据面板标题的文档指定的。我错过了什么？

【问题讨论】：

标签： css extjs sass styles

【解决方案1】：

几乎所有 ExtJS 组件都有style 或cls 属性。手动覆盖 extjs css 类应该是最后的手段。

在您的情况下，您应该查看这些组件：

Ext.panel.Header

Ext.panel.Title

panel 组件应该有一个header config 并且标题组件应该有一个title config 来自定义每个部分。

这是工作示例：Sencha fiddle example

对于你提到的 sass 变量

它们用于自定义 ExtJS 主题。因此，如果您想以 triton 为基础制作自己的主题，您可以使用这些变量来创建自己的主题。如果您想覆盖整个主题（例如所有 Ext.panel.Panel 组件的背景颜色），这非常有用

我建议您阅读本指南以获取有关此主题的更多信息：Theming guide

【讨论】：