网格未在小部件中显示答案

【问题标题】：grid not showing within widget网格未在小部件中显示
【发布时间】：2015-08-25 13:48:20
【问题描述】：

我的主容器是 TabContainer，在选项卡中我显示了各种自定义小部件。最常见的格式是 BorderContainer，顶部用于按钮和搜索选项，中间部分用于网格。这是我的基本列表视图。所以，我的模板是一个带有 BorderContainer 的 div，它有一个空的 div 来插入网格。我的问题是，当放置在中心 div 内时，我无法显示网格。到目前为止，我一直在使用将网格附加到 Tab 容器中的解决方法（实际上是在 BorderContainer 下方并将 BorderContainer 的大小调整为 Top 部分的大小。因此，网格实际上位于 BorderContainer 下方。

这是一个简单的模板示例：

<div id="BorderContainer_BW" style="height: 500px; width: 100%"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-attach-point="BorderContainer_BW"
data-dojo-props="design:'headline'">

<div id="actionBar_BW" data-dojo-type="dijit.layout.ContentPane"
    data-dojo-props="region:'top'">
    <table id="buttonBar_BW" style="width: 100%">
        <tr>
            <td id="BBL_BW">
                <button id="Button_Refresh_BW" style="float: left;"
                    data-dojo-type="dijit.form.Button" type="button"
                    style="padding:5px;" data-dojo-attach-point="refreshButton"
                    data-dojo-attach-event="onClick:applyRefresh">Refresh</button>
            </td>
        </tr>
    </table>
</div>

<!-- center section of borderContainer -->
<div id="BasicGridArea" data-dojo-type="dijit.layout.ContentPane"
    data-dojo-attach-point="basicGridNode"
    data-dojo-props="region:'center'"></div>
</div>

网格在构造函数中创建，如果附加到选项卡，则显示 OK。由于网格是自定义小部件的一部分，我想将网格放在 widget.js 中这是该尝试的一个示例：

postCreate : function() {
    this.inherited(arguments);
    var gridNode = this.get("basicGridNode");
    console.log("center pane = " + gridNode);  // to see if it is undefined...
    this.theGrid.placeAt(gridNode);
    },
startup : function() {
    this.inherited(arguments);
    this.theGrid.startup();
    },

创建和启动网格的主js脚本文件中的代码是：

gPersonList = new com.company.etc.TheWidget(dataIn);
dojo.byId("Tab1").appendChild(gPersonList.domNode);  // place widget in the tab
gPersonList.startup();  // should start both widget and grid

这是可行的解决方法，但显然是错误的！

dojo.byId("Tab1").appendChild(gPersonList.domNode);
dojo.byId("Tab1").appendChild(persongrid.domNode); (appending the grid itself after the widget)
persongrid.startup();

我相信我错过了一些简单的步骤，但到目前为止还无法弄清楚。

【问题讨论】：

标签： javascript dojo

【解决方案1】：

这是我发现的……我的主 .jsp 文件中有这个：

<style type="text/css">
#grid {
    width: 100%;
    height: 100%;
}
</style>

猜它没有被识别。我仔细看了看，在操作栏下方看到了一组非常细的线条，所以它很可能在中心...所以，我在创建网格时添加了“autoHeight：true”，它现在出现了。

这确实带来了几个问题...为什么我的主 .jsp 文件中的样式没有被识别？还有一个关于自定义小部件的更一般的问题，如何找到并加载 css 文件？是否需要补充：

"dojo/text!./themes/PersonListWidget.css"

还是会因为主题和模板位于同一目录级别而被找到...

【讨论】：