dojo - 自定义小部件内的 Dijit Tabcontainer-Tablist 宽度运行太长

Question

我有一个模板化的自定义小部件，它继承自 dijit.layout._LayoutWidget、dijit._Container 和 dijit._Templated，它为我的小部件原生小部件提供了调整大小等的支持。我只需要一个 TabContainer，它的大小与小部件的大小相同.这是我的小部件。

<div dojoAttachPoint="containerNode">
    <div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
    <div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
    hello
    </div>
</div>
</div>

一切看起来都很好，但我得到了一个奇怪的 TabList。

我调查了这个问题。小部件和 TabContainer 的所有部分都具有正确的宽度和高度值。只有 tablist 有一个 loooong 宽度(50'000 像素宽):我读过类似的问题，比如这个: http://bugs.dojotoolkit.org/ticket/10495 ，但就我而言，所有元素都具有正确的宽度和长度。我不知道 tablist 是如何得到这么长的宽度的。

我也尝试了很多添加和删除 style="width:100%;height:100;"的方法对于父容器及其父容器。但是没有一个配置解决了这个问题。

有没有办法解决这个问题？

Answer 1

以防万一有人正在寻找解决方案，我遇到了同样的问题，并提出了这个问题。虽然我查看了错误报告，但它不适用于我的情况，我没有在表中嵌入 tabcontainer 或将 doLayout 设置为 false。我尝试设置 tabcontroller 但这也不起作用。最后在调试之后，事实证明您必须在小部件中提供“调整大小”方法并按以下方式调整其中的 tabcontainer 的大小

widgetTemplate =  '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' + 
'...' //Rest Of template declaration

//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer 
}

});

希望这可以帮助