css - 在 dojo web 应用程序中使用 extjs 为面板应用不同的主题

Question

我正在尝试将不同的主题应用于我在不同页面上显示的面板。我不太习惯使用 css 和 javascript，所以希望能提供一些帮助。

      <div id="rules" data-dojo-type="dojox.mobile.View">
        <h1 data-dojo-type="dojox.mobile.Heading" 
           data-dojo-props="back:'DASHBOARD',moveTo:'general'" class="style1">
                         REALTIME-COUNTS
        </h1>
        <center>
           <div dojoType="dojox.mobile.RoundRect" style="width: 1200px; 
                      height: 400px;" shadow="true">
           <h4>TOTAL DAILY RESULTS</h4>
           <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
           <div id="chartdiv" style="width: 70%; height:342px;"></div>  
           </div>
           </div>
       </center>  

现在我在元素中添加了一个 theme.css 文件，但不确定如何执行此操作。我想应用于上面名为“规则”的面板/ View 。这是可能的还是我离这里很远？

Answer 1

您的 theme.css 文件是什么样的？如果您只是想将样式应用于“规则”面板而不是任何其他面板，那么您可以这样做:

#rules {
  width: 100%;
}

但是如果你想在别处重用这个 CSS，那么只需像这样向你的 div 添加一个类(使用 id 规则):

<div id="rules" class="mobileView" data-dojo-type="dojox.mobile.View">

然后添加这样的 css 规则:

.mobileView {
  width: 100%;
}

不确定这是否是您要找的东西，但如果您将一些东西放入 JSFiddle，我可能会更好地帮助您。