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

Question

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

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 文件更改 header background-color：

app.css

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

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

Answer 1

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

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

Ext.panel.Header

Ext.panel.Title

panel component should have a header config and the header component should have a titleconfig自定义各个部分。

这是工作示例：Sencha fiddle example

对于您提到的 sass 个变量

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

，这将非常有用

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

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

How to properly specify theme variables in extjs?

css

extjs

sass

styles