ExtJS：主题化单个组件

Question

我的目标是更改单个面板的标题字体大小。

我试图阅读http://docs.sencha.com/extjs/4.2.1/#!/guide/theming，但我发现的只是整个应用程序的主题、项目中的所有面板主题和覆盖“主题 JS 覆盖”中的配置选项，但没有覆盖 CSS 变量对于单个组件。

有没有什么方法可以在不为整个项目烦恼这个 SASS 的情况下实现它？

Answer 1

只需在面板中添加一个类，然后创建一个规则来匹配：

new Ext.panel.Panel({
    cls: 'foo',
    renderTo: document.body,
    title: 'X'
});

.foo .x-header-text {
    font-size: 24px;
}