在浮动面板上应用 CSS - Sencha touch答案

【问题标题】：Apply CSS on floating panel - Sencha touch在浮动面板上应用 CSS - Sencha touch
【发布时间】：2013-10-17 19:59:10
【问题描述】：

我的容器中有一个“selectfield”组件。我正在为选项打开浮动面板。我想在那个浮动面板上应用一些特定的 CSS。

I have referred sencha touch doc . I have got one option (i.e. floatingCls).
I have tried to apply that also.
But it is not working.

Please guide me how do I apply Cls.

Thank You in advance.

【问题讨论】：

标签： sencha-touch panel floating cls

【解决方案1】：

是的，即使我尝试过使用 floatingCls，它也不起作用。所以我尝试了重写它的 sencha 的 css 类。

这里的工作代码如下所示：

App.js 文件代码：

Ext.application({
    name: 'StackOverFlowDemo',
    launch: function() {
      var demo =  Ext.create("Ext.form.Panel", {
            fullscreen: true,
            scrollable:false,
            items: [
                {
                    xtype: 'selectfield',
                    label: 'Choose one',
                    options: [
                        {text: 'First Option',  value: 'first'},
                        {text: 'Second Option', value: 'second'},
                        {text: 'Third Option',  value: 'third'}
                    ]
                }
            ]
        });

        Ext.Viewport.add(demo);
    }
});

这里是您需要在 html 文件中设置的 index.css 代码。

index.css

.x-floating{
    background-color: darkslateblue;
}

.x-panel.x-floating, .x-msgbox, .x-form.x-floating{
    background-color: grey;
}

.x-innerhtml {
    background-color: lightpink;
}

.x-inner x-size-monitored x-paint-monitored x-scroll-scroller{
    background-color: dodgerblue !important;
}

.x-anchor{
    background-color: grey !important;
}

.x-webkit .x-anchor.x-anchor-right{
    background-color: grey !important;
}

.x-panel.x-floating .x-panel-inner .x-list{
    background-color: lightblue !important;
}

.x-list .x-list-item.x-item-selected.x-list-item-tpl{
    color:darkred;
}

.x-list-label{

}

或者您也可以使用 CSS Vars（即主题）来实现。

【讨论】：

【解决方案2】：

您可以使用面板的“cls”配置向面板添加自定义 CSS 类。

或者，您可以使用“样式”配置直接对其应用样式（尽管不建议这样做 - 相当于 HTML 中的内联样式）。

【讨论】：