Question

在一个sencha应用程序中，我想创建两个或更多＆＃34; Panel＆＃34;在同一页面，但具有不同的风格。

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

我在一个页面中添加这两个面板，例如。＆＃34;中心＆＃34;主观。使用css class panel_1和panel_2添加css文件。 但不起作用。
如何设置这两个面板具有不同的标题，背景颜色，颜色，边框等。
添加相同的问题，我想要不同的Button，例如。有黄色文本的蓝色按钮，有白色文本的红色按钮，在同一工具栏中。
我尝试覆盖extjs css类，例如。 x-panel-body。你知道，所有的组合都会被改变。那不是我想要的。

Answer 1

很难说出你遇到了什么困难。你似乎想要做的事情确实有效。我只是提供一个简单示例，请参阅https://fiddle.sencha.com/#fiddle/ecd

The easiest way is to add a cls to your panel，然后您可以使用CSS仅在这些类中应用。您还可以将cls添加到组件内的项目。另外，Ext有一些已经应用的类，所以你可以使用它们（x-body，x-header用于Ext.panel.Panel）。以下示例说明如何确定.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;
}

Answer 2

最常见的是，您可以扩展sass资源，为两个面板创建自定义类（或者至少为您想要更改的面板创建）。

你可以使用Sencha Architect，它有30天的试用期。

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

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

然后使用名为like

的类生成

.panel-default-black

这个课你可以为所有内部元素创建你的sass

然后，

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

编译主题后，您将看到两个面板之间的变化。

更多信息，您可以在Sencha

的网站上找到

另一种没有推荐的方法，就是使用样式标签，并直接为您的面板提供样式，但不建议使用

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

2 个答案: