Question

使用以下代码段，拆分器在转换到当前页面后显示的第一个选项卡上显示正常，但拆分器在后续选项卡中未正确显示。

<div dojoType="dijit.layout.TabContainer" class="fitToHeight fitToWidth" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_1">              
    <a4j:include
        viewId="/view/syllabus/syllabusManagement.xhtml"
        id="container_syllabus">
    </a4j:include>
</div>
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_2">
    <a4j:include
        viewId="/view/student/studentManagement.xhtml"
        id="container_student">
    </a4j:include>
</div>

以下是employeeManagement.xhtml / syllabusManagement.xhtml的片段

<div dojoType="dijit.layout.BorderContainer" design="sidebar"
    liveSplitters="true" class="fitToHeight fitToWidth">

    <div class="leftPanel" dojoType="dijit.layout.ContentPane"
            minSize="5%" splitter="true" region="leading">
            Source Code Goes Here
    </div>
    <div class="targetPanel" dojoType="dijit.layout.ContentPane"
            minSize="400" region="center">
            Target Code Goes Here
    </div>
 </div>

当页面加载时，默认为syllabusManagement.xhtml，分割器根据需要运行，但是当我将标签切换到employeeManagement.xhtml时，分割器会进行折腾，从而产生真正不可预测的行为。

我的观察结果是，在转换时加载选项卡时，拆分器会很好地呈现。

如何修复此拆分器渲染问题？

感谢。

Answer 1

我建议使用dojox.layout.ContentPane并设置href属性，而不是首先加载所有标签。

对于tabcontainer和bordercontainer，您的布局需要100％100％才能正确计算大小。

如果未设置宽度/高度here

，请查看此处发生的情况

Dojo Splitter在TabContainer中无法正常工作

1 个答案: