Apply CSS on floating panel - Sencha touch

Question

I am having one "selectfield" component in my container. I am opening floating panel for options. I want to apply some specific CSS on that floating panel.

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

Yeah, even I have tried using floatingCls, it ain't working. So I have tried by overriding its sencha's css class.

here it's working code shown below:

App.js file code:

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

here its index.css code which you need to set in your html file.

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{

}

Or you can also do it by using CSS Vars (i.e Themeing).

Answer 2

You can use the "cls" config of the Panel to add a custom CSS class to the panel.

Alternatively you can use the "styles" config to apply styles directly to it (although this isn't recommended - equivalent of inline styles in HTML).