Dojo 树网格的样式不正确

Posted 2023-02-16

【中文标题】Dojo 树网格的样式不正确

【英文标题】：Dojo Tree Grid not being styled correctly

【发布时间】：2014-02-25 21:41:31

【问题描述】：

我使用 Brad Balassatis 的这篇博文创建了一个 Dojo 树网格：http://xcellerant.net/2013/05/28/categorized-dojo-grid/

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

应该是这样的：

但它看起来像这样：

这些是我尝试过的：

已使用“网络”选项卡中的 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>

包含包含网格的 CC 的 XPage：

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

【问题讨论】：

我自己尝试并获得正确的 css。请贴出整个xpages的源代码

您是否使用“使用运行时优化的 JavaScript 和 CSS 资源”属性？

@FrantisekKossuth - 更改此设置没有区别。

@adminfd - 我添加了包括父页面在内的完整代码。我唯一没有包括的东西是 xAgent，除了视图位置之外，它与 Brad 的博客文章没有任何变化。感谢您的帮助

你是不是也在加载通用的dijit.css？

【参考方案1】：

我测试了示例代码，发现在主题的<theme>标签中添加这个属性时问题得到解决：

extends="webstandard"

【讨论】：

我也遇到了同样的问题，我有一个自定义主题，并且正在使用扩展默认设置，如何在不使用扩展的情况下解决这个问题呢？