Extjs 5：如何使两个面板有不同的风格 [英] Extjs 5： how to make two panel with different style

问题描述

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

In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.

Panel_1.js：

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：

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文件。 但不起作用。

如何设置这两个面板具有不同的标题，背景颜色，颜色，边框等。

添加同一个问题，我想要不同的Button，例如。蓝色带黄色文本的按钮，红色带有白色文本的按钮，位于同一个工具栏中。\\
我尝试覆盖extjs css类，例如。 x面板体。你知道，所有的compoent都会改变。这不是我想要的。

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.

推荐答案

很难说出你的困难。你似乎试图做什么工作。我将提供一个简单的示例，请参见 https://fiddle.sencha.com/#fiddle/ecd

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

最简单的方法是在您的面板中添加 cls ，然后您可以使用CSS仅在这些类中应用。您还可以向组件中的项目添加 cls 。此外，Ext有一些已经应用的类，所以你可以使用它们（x-body，x-header为Ext.panel.Panel）。以下示例说明如何确定 .x-header 定义的范围，以便它们仅适用于您的类

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

这篇关于Extjs 5：如何使两个面板有不同的风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！