4

我有一个模板化的自定义小部件，它继承自 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;" 的方法 对于父容器及其父容器。但是没有一个配置解决了这个问题。

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

4

4 回答 4

3

以防万一有人在寻找解决方案，我遇到了同样的问题，并提出了这个问题。虽然我查看了错误报告，但它不适用于我的情况，我没有在表中嵌入 tabcontainer 或将 doLayout 设置为 false。我尝试设置 tabcontroller 但这也不起作用。最后在调试之后，事实证明你必须在你的小部件中提供'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 
}

});

希望这可以帮助

于 2011-09-23T04:16:17.470 回答
1

尝试将属性添加到您的 TabContainer：

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

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

于 2011-08-23T15:04:46.633 回答
0

只需像这样重写你的css：

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

@-moz-document url-prefix() {
  div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
    height: 31px !important;
  }
}
于 2013-04-25T12:32:10.930 回答
0

如果要删除第一个：“useMenu：false” 如果要删除第二个和第三个：“useSlider：false”

于 2016-06-06T13:04:57.877 回答