在浮動面板上應用CSS - Sencha touch

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

是的，即使我嘗試過使用floatingCls，它不工作。所以我嘗試了壓倒Sencha的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瓦爾（即更換主題皮膚）做到這一點。

Answer 2

您可以使用面板的「cls」配置向面板添加自定義CSS類。

或者，您可以使用「樣式」配置將樣式直接應用於它（儘管這不被推薦 - 相當於HTML中的內聯樣式）。