Appliquer CSS sur un panneau flottant - Sencha touch

Question

J'ai un composant "selectfield" dans mon conteneur. J'ouvre le panneau flottant pour les options. Je souhaite appliquer des CSS spécifiques sur ce panneau flottant.

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

Ouais, même si j'ai essayé d'utiliser floatingCls, cela ne fonctionne pas. J'ai donc essayé en remplaçant la classe css de son sencha.

ici il est le code de travail ci-dessous:

app.js code du fichier:

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

ici son code index.css que vous devez définir dans votre fichier 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{ 

} 

Ou vous pouvez aussi le faire en utilisant CSS Vars (i.e. themeing).

Answer 2

Vous pouvez utiliser la configuration "cls" du Panel pour ajouter une classe CSS personnalisée au panneau.

Vous pouvez également utiliser la configuration "styles" pour appliquer directement des styles (bien que cela ne soit pas recommandé - l'équivalent des styles en ligne en HTML).