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

Question

在 Sencha 应用程序中，我想在同一页面中创建两个或多个“面板”，但具有不同的样式。

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

我将这两个面板添加到一个页面中，例如。主视图的“中心”。添加具有 css 类 panel_1 和 panel_2 的 css 文件。 但不起作用。
如何为这两个面板设置不同的标题、背景颜色、颜色、边框等。
添加相同的问题，我想要不同的按钮，例如。带有黄色文本的蓝色按钮，带有白色文本的红色按钮，在同一个工具栏中。
我尝试覆盖 extjs css 类，例如。 x面板主体。你知道，所有组件都将更改。这不是我想要的。

Answer 1

很难说出您遇到的困难是什么。您似乎正在尝试做的事情确实有效。我将仅提供一个简单示例，请参阅 https://fiddle.sencha.com/#fiddle/ecd

The easiest way is to add a cls to your panel ，那么您可以使用 CSS 仅在这些类中应用。您还可以将 cls 添加到组件内的元素。此外，Ext 有一些它已经适用的类，因此您可以使用它们(Ext.panel.Panel 的 x-body、x-header)。以下示例向您展示了如何限定您的 .x-header 定义的范围，以便它们仅适用于您的类

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