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文件. 但不起作用.
如何为这两个面板设置不同的标题，背景颜色，颜色，边框等.
添加相同的问题，我想要不同的按钮，例如.在同一工具栏中，带有黄色文本的蓝色按钮，带有白色文本的红色按钮.
我尝试覆盖extjs css类，例如. x-panel-body.您知道，所有组件都将被更改.那不是我想要的.

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已经应用了一些类，因此您可以使用它们(Ext.panel.Panel的x-body，x-header).以下示例向您展示了如何限定.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屋！