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

我在容器中有一個「selectfield」組件。我正在打開浮動面板的選項。我想在該浮動面板上應用一些特定的CSS。在浮動面板上應用CSS - Sencha touch

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.

來源

2013-10-16 Curious_k.shree

是的，即使我嘗試過使用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瓦爾（即更換主題皮膚）做到這一點。

來源

2013-10-17 10:19:54

非常感謝你... –

你的，歡迎:) –

-1

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

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

來源

2013-10-17 11:59:10 Stuart

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

回答

相關問題