当我使用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>
答案 0 :(得分:1)
如果网格是选项卡中显示的唯一内容,那么您不需要所有这些BorderContainers和ContentPanes,将网格作为TabContainer的directChild。
否则,这是一个着名的问题,解决此问题的一种方法是在选项卡onLoad之后以编程方式创建网格。 Tha意味着基本上连接到tab onLoad事件,并在此处创建网格。 修复它的另一种方法是使用doLayout,isLayoutContainer,并指定父窗口小部件的大小。
通过所有这些,你应该找到适合你的问题的解决方案。如果您需要更多指导,我建议您加入irc freenode #dojo。你可能会找到一个人来指导你一步一步:)