Question

我使用Brad Balassatis撰写的博客文章创建了一个Dojo Tree Grid：http://xcellerant.net/2013/05/28/categorized-dojo-grid/

网格已创建，但样式完全关闭。

它应该是这样的：

enter image description here

但它看起来像这样：

enter image description here

这些是我尝试过的事情：

已验证使用“网络”标签中的Chrome开发工具加载CSS
已验证最后加载网格的CSS
注释掉bootstrap CSS以验证dojo和bootstrap没有冲突
将资源文件从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包含所有内容。使用Bootstrap 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的Collaboration Today：

<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"

Dojo Tree Grid未正确设置样式

1 个答案: