Css Extjs 5：如何制作两个不同风格的面板

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

我在一个页面中添加了这两个面板，例如mainview的“中心”。添加带有css类panel_1和panel_2的css文件但不起作用。
如何将这两个面板设置为不同的标题、背景色、颜色、边框等
添加相同的问题，我希望在同一工具栏中使用不同的按钮，例如蓝色按钮和黄色文本，红色按钮和白色文本。

---

我尝试重写extjscss类，例如x-panel-body。你知道，所有的成分都会改变。这不是我想要的。

最典型的情况是，您可以扩展sass资源，为两个面板（或者至少为您希望更改的面板）创建自定义类

您可以使用Sencha架构师，它有30天的试用期

诀窍是添加一个ui标记，然后将其添加到生成的类名中

Ext.define("MyApp.view.Panel_2", {
    ui: 'black'
});

然后将生成一个名为like的类

.panel-default-black

对于这个类，您可以为所有内部元素创建sas

然后sass/component.css将包含

.panel-default-black {
     background-color: black;
     color: #ffffff;

    .panel-default-header {
        background-color: $some-predefined-value-in-another-sass-file;
    }
}

另一个选项是使用UI标签，如：

@include extjs-panel-ui(
    $ui-label: 'black',
    $ui-background: black;
    $ui-color: white;
    $ui-header-background-color: blue;
);

编译主题后，您将看到两个面板之间的更改

更多信息，请访问

---

另一种不推荐的方式是使用样式标签，并直接为面板提供样式，但不建议使用这种方式，因为很难判断您在使用什么。你似乎想做的事确实管用。我只提供一个简单的示例，请参见

，则可以使用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;
}

---

很难说你在问什么，如果能举一个你尝试过的完整例子，我可以帮你。一个很好的方法是，这是一个有效的答案，ui选项很好，但是如果您还没有使用Ext命令构建自己的样式，则需要做很多工作。样式也可以使用，但您很正确，它是不好的，就像HTML中的内联样式一样。我的回答表明OP想要做的是有效的