dojo datagrid 只显示一行

Question

当我使用 dojo 开发前端 UI 时，我遇到了一个令人头疼的问题。这个问题我google了很久。 mailist 和 bugtracker 也是如此。

当我使用 TabContainer 打开页面并切换到选项卡时，选项卡中的 DataGrid 没有正确显示。现在我切换到另一个选项卡并再次切换回来，网格正确显示。我在声明式 dojo 中实现了这一点。只有一行javascript代码。

<script>
    function imgFormatter(s) {
        return '<img src="' + s + '"/>';
    }
</script>

情况是这样的： 打开页面 http://i.stack.imgur.com/QGeid.png

切换到另一个选项卡并再次切换回来 http://i.stack.imgur.com/OWQxR.png

代码：

<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center'">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="tab1">
         tab1
    </div>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="Hosts">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
            <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="url: dojo.config.api2Path + '/GangliaHostMetric', urlPreventCache:true, clearOnClose:true" data-dojo-id="gangliaHostSummaryStore"></div>
            <table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="region: 'center', query : {}, store:gangliaHostSummaryStore" data-dojo-id="gangliaHostSummaryGrid">
                <thead>
                    <tr>
                        <th field="hostname">hostname</th>
                        <th field="load_report" width="300" formatter="imgFormatter">Load</th>
                        <th field="mem_report" width="300" formatter="imgFormatter">Memory</th>
                        <th field="network_report" width="300" formatter="imgFormatter">Network</th>
                        <th field="cpu_report" width="300" formatter="imgFormatter">CPU</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Answer 1

如果网格是选项卡中唯一显示的内容，则不需要所有这些 BorderContainers 和 ContentPanes，将网格作为 TabContainer 的 directChild。

否则，这是一个著名的问题，解决此问题的一种方法是在选项卡 onLoad 之后以编程方式创建网格。 Tha 意味着基本上连接到选项卡 onLoad 事件，并在此处创建网格。 解决它的另一种方法是使用 doLayout、isLayoutContainer，并同时指定父窗口小部件的大小。

通过所有这些，您应该找到适合您问题的解决方案。如果您需要更多指导，我建议您加入 irc freenode #dojo。在那里你可能会找到人一步一步地指导你:)