Применить CSS к плавающей панели — сенсорный экран Sencha

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

cls panel floating sencha-touch
person Curious_k.shree    schedule 16.10.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Да, даже я пробовал использовать floatCls, это не работает. Итак, я попытался переопределить класс 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).

person Yash Vekaria    schedule 17.10.2013

arrow_upward
-1
arrow_downward

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

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

person Stuart    schedule 17.10.2013