Extjs 5: how to make two panel with different style - css

Question

In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.
Panel_1.js:
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title",
//some try
componentCls:'panel_1',
cls:'panel_1'
...
});
Panel_2.js:
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title",
componentCls:'panel_2'
});
I add these two panels in one page, eg. the "center" of mainview. Add for css file with css class panel_1 and panel_2. But does not work.
how can I set these two panel with different Title, Background color, color, border, and so on.
Add the same question, I want different Button, eg. Blue Button with yellow text, red Button with white text, in a same toolbar.
I try override the extjs css class, eg. x-panel-body . You know, all compoent will be changed. That is not what I want.

Answer 1

It's hard to tell what you're having a hard time with. What you seem to be trying to do does work. I'll just provide a simple example, see https://fiddle.sencha.com/#fiddle/ecd
The easiest way is to add a cls to your panel, then you can use CSS to apply only within those classes. You can also add cls to items inside of your component. Also, Ext has some classes it already applies so you can use them (x-body, x-header for Ext.panel.Panel). The following example shows you how to scope your .x-header definitions so they only apply to your class
JavaScript
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title',
cls:'panel_1',
html: 'Here I am',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title',
cls:'panel_2',
html: 'Here I am again',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
CSS
.panel_1 .x-header{
background-color: blue;
}
.panel_1 .ok{
background-color: green;
}
.panel_2 .x-header{
background-color: yellow;
}
.panel_2 .cancel{
background-color: red;
}

Answer 2

Most typically, you would extend your sass resources to create custom classes for your both Panels (or at least for the one you wish to change).
You could do it with the Sencha Architect, which has a 30 day trial period.
The trick would then be to add a ui tag, that would then be added to your generated class name
Ext.define("MyApp.view.Panel_2", {
ui: 'black'
});
would then be generated with a class called like
.panel-default-black
for this class you could then create your sass for all internal elements
sass/component.css would then for eg contain
.panel-default-black {
background-color: black;
color: #ffffff;
.panel-default-header {
background-color: $some-predefined-value-in-another-sass-file;
}
}
another option would be to use the UI-label, like:
#include extjs-panel-ui(
$ui-label: 'black',
$ui-background: black;
$ui-color: white;
$ui-header-background-color: blue;
);
After compiling the theme, you would then see the changes between the 2 panels.
More info, you could find on the site of Sencha
Yet another none recommended way, would be to use the style tag, and to directly give your style for your panel, but that is not recommended to use