Extjs 5: how to make two panel with different style

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.

It's hard to tell what you're asking, I can help if show a full example of what you've tried. A great way to do it is at https://fiddle.sencha.com/#home — Ruan Mendes, Dec 02 '14 at 21:26

Ruan Mendes · Answer 1 · 2014-12-02T21:46:17.580

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;
}

score 2 · Answer 2 · answered Dec 02 '14 at 20:53

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

This is valid answer, the ui option is great, but it takes a lot of work if you are not already building your own styles using Ext command. Styles can also be used, but you are very correct that it's bad, just as inline styles in HTML. My answer shows that what the OP was trying to do does work — Ruan Mendes, Dec 02 '14 at 21:42

Extjs 5: how to make two panel with different style

2 Answers2

Linked