dojo datagrid只显示一行

时间:2012-07-20 02:24:26

标签: dojo dojox.grid.datagrid

当我使用dojo开发前端UI时,我遇到了头痛的问题。我已经谷歌这个问题很长一段时间了。邮件主义者和追踪者也是如此。

当我用TabContainer打开一个页面并切换到Tab时,Tab中的DataGrid没有正确显示。现在我切换到另一个Tab并再次切换回来,网格正确显示。我在Declarative 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>

1 个答案:

答案 0 :(得分:1)

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

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

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