Применить CSS на плавающей панели - Сенча сенсорный

Question

У меня есть один компонент "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.

Answer 1

Да, даже я пытался использовать плавающий CLS, он не работает. Поэтому я попытался переопределить класс 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);
    }
});

здесь его код index.css, который вам нужно установить в вашем HTML-файле.

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 (т.е. Themeing).

Answer 2

Вы можете использовать конфигурацию "cls" Panel, чтобы добавить собственный класс CSS на панель.

В качестве альтернативы вы можете использовать конфигурацию "styles" для непосредственного применения к ней стилей (хотя это не рекомендуется - эквивалент встроенных стилей в HTML).