ExtJS: Theming single component

问题:

My target is to change header's font size for one single panel.

I tried to read http://docs.sencha.com/extjs/4.2.1/#!/guide/theming, but all what I found was theming the whole applications, theming all-the-panels-in-the-project and overriding config options in "Theme JS Overrides", but no CSS variables overriding for single component.

Is there any way to achieve it without fussing with this SASS for whole project?

回答1:

Just add a class to the panel, then create a rule to match:

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

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