0

コンテナに「selectfield」コンポーネントが 1 つあります。オプションのフローティング パネルを開いています。そのフローティング パネルに特定の 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.
4

2 に答える 2

3

ええ、floatingCls を使ってみましたが、うまくいきません。そこで、煎茶の 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 (つまりテーマ) を使用して行うこともできます。

于 2013-10-17T10:19:54.593 に答える
-1

パネルの「cls」構成を使用して、カスタム CSS クラスをパネルに追加できます。

または、「スタイル」構成を使用してスタイルを直接適用することもできます (ただし、これはお勧めしません - HTML のインライン スタイルと同等です)。

于 2013-10-17T11:59:10.877 に答える