为啥 Dojo Tab Container 仅适用于浏览器调整大小

Posted 2023-02-16

【中文标题】为啥 Dojo Tab Container 仅适用于浏览器调整大小

【英文标题】：Why does Dojo Tab Container work only on browser resize为什么 Dojo Tab Container 仅适用于浏览器调整大小

【发布时间】：2015-02-25 23:44:26

【问题描述】：

我有一个带有 3 个内容窗格的选项卡容器，仅在调整浏览器大小时才加载，而不是在实际页面加载期间加载。模板文件 TContainer.html 如下

<div style="width:100%;height:100%" >
<div dojoType="dijit.layout.TabContainer" data-dojo-attach-point="tab" open="true" tabPosition="top" style="width:100%; margin:5px;font-weight:bold; overflow-y:visible;" tabStrip="true"  doLayout="false">

        <!-- content panes: title is tab name, make this tab selected -->
        <div dojoType="dijit.layout.ContentPane" style="width:100%;height:100%;"  data-dojo-props="title:'Tab1',selected:'true'">   

        </div>

        <!-- content panes: title is tab name, no special features here -->
        <div dojoType="dijit.layout.ContentPane" style="width:100%;height:100%;" data-dojo-props="title:'Tab2'">
        </div>

        <!-- content panes: title is tab name, make this tab closable -->
        <div dojoType="dijit.layout.ContentPane" style="width:100%;height:100%;"  data-dojo-props="title:'Tab3'">
            </div>

    </div>

widget相关的TContainer.js文件如下

define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/dom-style",
"dojo/mouse",
"dojo/on",
"dojo/query",
"dijit/layout/TabContainer", 
"dijit/layout/ContentPane",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
 "dojo/text!./templates/TabContainer.html"

], function(declare, baseFx, lang, domStyle, mouse, on,query,TabContainer,ContentPane,_WidgetBase, _TemplatedMixin,_WidgetsInTemplateMixin,template) 返回声明（[_WidgetBase，_TemplatedMixin，_WidgetsInTemplateMixin]，

    templateString: template,

    c1:"content1",

    c2:"content2",

    c3:"content3",

    // A class to be applied to the root node in our template
    baseClass: "tabWidget",

    constructor: function (args) 
        // Allow pages variable to be set at runtime
        declare.safeMixin(this, args);

    ,

    resize: function ()  
        this.tab.resize(arguments);
        this.inherited(arguments); 
    ,

    postCreate: function()

// Run any parent postCreate processes - can be done at any point
this.inherited(arguments);

,

);

);

我使用以下代码以编程方式创建小部件

var Tab = new TContainer("c1" : "content1",     
                            "c2":"content2",
                             "c3":"content3 answers"
                           );
//dnode is a div node
Tab.placeAt(dnode);
Tab.startup();
Tab.resize();                                       

【参考方案1】：

高度和宽度，而不是父容器的大小（此处必须是内容窗格）不会呈现为选项卡容器的大小，因此除非您手动调整浏览器大小或以编程方式强制调整大小功能，否则它将不会不工作。

您也可以在启动后使用以下命令： resize: function () this.parentCont.resize(arguments); //here parentCont is the widget attach point this.inherited(arguments);

【讨论】：

向所有 3 个内容窗格添加了附加点，并尝试为所有 3 个内容窗格调用调整大小，但仍然是同样的问题！

使用 BorderContainer 作为选项卡容器的父级。为此提供一个附加点。您需要调整该父容器的大小。

提供一个 div 标签，而不是一个空的 div 标签（第一个），如下所示： 并在启动后放这段代码..... resize: function () this .bc.resize(arguments);//bc是BorderContainer的atttachpoint名称 this.inherited(arguments);

【参考方案2】：

似乎需要在 tabcontainer 标签中定义 controllerWidget: 'dijit.layout.TabController' 属性。现在可以正常工作，没有任何问题。感谢https://bugs.dojotoolkit.org/ticket/10113#comment:11