在 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 文件，但不知道如何执行此操作。我想申请上面名为“规则”的面板/视图。这是可能的还是我在这里？

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 中添加一些内容，我可能会为您提供更好的帮助。