自定义窗口小部件中的Dijit Tabcontainer-Tablist宽度运行时间过长

Question

我有一个模板化的自定义小部件，它继承自dijit.layout._LayoutWidget，dijit._Container和dijit._Templated，它为我的小部件本机Widget支持调整大小等。我需要的是一个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，但这也不起作用。最后在debuggin之后，你必须在你的小部件中提供'resize'方法，并按照以下方式调整其中的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 
}

});

希望这有帮助

Answer 2

尝试向TabContainer添加属性：

<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >

http://bugs.dojotoolkit.org/ticket/10113#comment:11

Answer 3

只需像这样重写你的CSS：

div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
  height: 30px !important;
}

@-moz-document url-prefix() {
  div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
    height: 31px !important;
  }
}

Answer 4

如果你想删除第一个：＆＃34; useMenu：false＆＃34; 如果你想删除第二个和第三个：＆＃34;使用滑动：假＆＃34;