Extjs 5: how to make two panel with different styl

问题:

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.

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

回答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