道場樹電網不被風格化正確

Question

我一直在使用從布拉德Balassatis這個博客帖子創建Dojo樹網格：創建http://xcellerant.net/2013/05/28/categorized-dojo-grid/

電網，但造型是完全關閉。

它應該是這樣的：

但是，相反它看起來像這樣：

這些都是我已經試過的東西：

• 驗證該CSS使用Chrome開發工具加載•網絡中標籤
• 證實，對電網的CSS正在裝載最後
• 註釋掉引導CSS驗證道場和引導不相互矛盾CC
• 移到資源文件的XPage和背面（無差異如預期）
• 主題禁用該控件

下面是資源加載：

<xp:this.resources> 
    <xp:dojoModule name="dojox.grid.TreeGrid"></xp:dojoModule> 
    <xp:dojoModule name="dijit.tree.ForestStoreModel"></xp:dojoModule> 
    <xp:dojoModule name="dojo.data.ItemFileWriteStore"></xp:dojoModule> 
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css"></xp:styleSheet> 
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css"></xp:styleSheet> 
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css"></xp:styleSheet> 
</xp:this.resources> 

下面是加載在客戶方電網的代碼onClientLoad事件

var layout = [ 
    { name: "Arrival Date", field: "state", width: "200px"}, 
    { name: "PO Number", field: "poNumber", width: "200px"}, 
    { name: "PO Type", field: "typePO", width: "200px"} 
]; 

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xReadCategorizedView.xsp"}); 

var treeModel = new dijit.tree.ForestStoreModel({ 
    store: jsonStore, 
    query: {type: 'state'}, 
    rootId: 'personRoot', 
    rootLabel: 'People', 
    childrenAttrs: ['children'] 
}); 

var grid = new dojox.grid.TreeGrid({ 
    treeModel: treeModel, 
    structure: layout 
}, 'treeGrid'); 

grid.startup(); 

dojo.connect(window, "onresize", grid, "resize"); 

---

完整代碼的要求。含有包含網格中的CC

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" dojoTheme="true" dojoParseOnLoad="true"> 

    <xp:this.afterPageLoad><![CDATA[#{javascript:if(userStore == "vendor" & vendorBean.vendorNum == null){refreshVendorBean();}}]]></xp:this.afterPageLoad> 
    <xp:this.resources> 
     <xp:dojoModule name="dojox.grid.TreeGrid"></xp:dojoModule> 
     <xp:dojoModule name="dijit.tree.ForestStoreModel"></xp:dojoModule> 
     <xp:dojoModule name="dojo.data.ItemFileWriteStore"></xp:dojoModule> 
     <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css"> </xp:styleSheet> 
     <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css"></xp:styleSheet> 
     <xp:styleSheet  href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css"></xp:styleSheet> 
    </xp:this.resources> 



    <xe:keepSessionAlive id="keepSessionAlive1" delay="300"></xe:keepSessionAlive> 
    <xp:br></xp:br> 
    <xp:panel> 
     <xp:div style="text-align:left"> 
      <xp:label value="By Arrival Date" id="label1" 
       style="font-weight:bold;font-style:italic;color:rgb(0,0,64);font-size:14pt;padding-left:3.0em"> 
      </xp:label> 
     </xp:div> 
     <xp:div style="width:100%;height:1000px"> 
      <div id="treeGrid"></div> 
     </xp:div> 


    </xp:panel> 
    <xp:eventHandler event="onClientLoad" submit="false"> 
     <xp:this.script><![CDATA[var layout = [ 
    { name: "Arrival Date", field: "state", width: "200px"}, 
    { name: "PO Number", field: "poNumber", width: "200px"}, 
    { name: "PO Type", field: "typePO", width: "200px"} 
];   
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "xReadCategorizedView.xsp"}); 

var treeModel = new dijit.tree.ForestStoreModel({ 
    store: jsonStore, 
    query: {type: 'state'}, 
    rootId: 'personRoot', 
    rootLabel: 'People', 
    childrenAttrs: ['children'] 
}); 

var grid = new dojox.grid.TreeGrid({ 
    treeModel: treeModel, 
    structure: layout 
}, 'treeGrid'); 

grid.startup(); 

dojo.connect(window, "onresize", grid, "resize");]]></xp:this.script> 
    </xp:eventHandler> 
    </xp:view> 

的XPage：含有網格

CC。

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom" xmlns:xe="http://www.ibm.com/xsp/coreex"> 

    <xp:this.beforePageLoad><![CDATA[#{javascript:if(session.getEffectiveUserName() == "Anonymous"){ 
    context.redirectToPage("Home.xsp") 
}}]]></xp:this.beforePageLoad> 
    <xc:layout> 
     <xc:Submitted_By_Arrival_CC /></xc:layout></xp:view> 

佈局CC一切被包裹在使用引導2

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"> 
    <link href='http://fonts.googleapis.com/css?family=Bitter' 
     rel='stylesheet' type='text/css' /> 
    <!-- Fix for IE8 --> 
    <xp:text escape="false" id="computedField1" 
     rendered="#{javascript:context.getUserAgent().isIE(0,8)}"> 
     <xp:this.value><![CDATA[#{javascript:"<style type='text/css'>body {padding-top: 45px; padding-bottom: 40px; }</style>"}]]></xp:this.value> 
    </xp:text> 

    <div class="container-fluid"> 
     <xc:header showCategories="true" /> 
     <div class="row-fluid"> 

      <div id="mainContent" class="span12"> 
       <xp:callback /> 
      </div> 
      <div id="rightColumn" class="span0 visible-desktop"> 
       <xp:callback facetName="rightColumn" /> 
      </div> 
     </div> 
    </div> 
</xp:view> 

我的主題，原本基於協作今天從openNTF：

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd"> 

<resources> 
    <styleSheet type="text/css" href="bootstrap-2.0.4.combined.min.css"/> 
    <styleSheet type="text/css" href="custom.css"/> 

    <script src="jquery-1.7.1.min.js" clientSide="true" type="text/javascript"/> 
    <script src="bootstrap-2.0.4.min.js" clientSide="true" type="text/javascript"/> 
    <script src="/custom.js" clientSide="true" type="text/javascript"/> 
    <metaData name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
</resources> 

<control override="false"> 
    <name>ViewRoot</name> 
    <property> 
     <name>pageTitle</name> 
     <value>Harmons Purchase Orders</value> 
    </property> 
</control> 
<control> 
    <name>ViewRoot</name> 
    <property> 
     <name>pageIcon</name> 
     <value>/favicon.ico</value> 
    </property> 
</control> 

Answer 1

我測試的樣本代碼，發現添加此屬性主題的<theme>標籤時，問題得到解決：

extends="webstandard"