在Dojo中，子窗口小部件不会呈现（将具有0高度） [英] Sub-widgets won't render (will have 0 height) in Dojo

问题描述

看看这个简单的小提琴：

http://jsfiddle.net/mercmobily/y4uG2/10/

基本上我声明一个小部件，并开始添加子小部件。有一点，我有一个小部件部分，它是一个带有选项卡容器和子选项卡的模板小部件。

主要部件具有：

 '< div data-dojo-type =sectiondata-dojo-props =title：\'Sub Widget\ 'data-dojo-attach-point =section>< / div>'+ 
  

那个部分小部件有：

  templateString：''+ 
'< div>'+ 
 
'< div class =subWidgetdata-dojo-type =dijit.layout.TabContainertabPosition：\'left-h\'dojo-attach-point =tabCont >'+ 
 
'< div data-dojo-type =dijit.layout.ContentPanedata-dojo-props =title：\Second Widget one\'> Second Widget One< / div>'+ 
'< div data-dojo-type =dijit.layout.ContentPanedata-dojo-props =title：\Second Widget Two\'> ; Section Widget Two< / div>'+ 
 
 < / div>'+ 
'< / div>'
  

有一点很难得到子小部件部分，以正确呈现。
在我现在的实际程序中，我玩过：

1. doTemplate


2. height属性在CSS中


3. 从主窗口小部件捕获resize（），并在子窗口小部件中调用resize（）

（p）（关于点（3）），我必须这样做：

resize：function（）{
this.inherited（arguments）;
console.log（调整主窗口大小调用！）;
this.settingsTab.resize（）;
}

在这一点上，我正在疯狂，因此问题是：接受的 ，正常和常用方式，以确保在小提琴，当您实例化主要小部件时，会显示子小部件？

PLUS，我需要指定高度：我曾经使用的每个标签容器的100％ （看起来像）

谢谢！

更新

我更新了小提琴，此时我添加了一个高度到标签容器在浏览器窗口上，实际上是这样的诀窍（！）。我不太清楚为什么我需要那个高度，但是OK。

http://jsfiddle.net/mercmobily/y4uG2/16/

当用户点击时，我也做了一个on（）在破碎的小部件上，并且 - 猜测是什么 - 调整大小运行并且呈现正常。

这使得更少的意义。为什么我自己的窗口小部件与模板中定义的窗口部件不同？我开始了各种各样的理论：例如，高度不能计算，因为它不显示。但是，相应的应用程序应该适用于其他选项卡，其子选项卡在左侧标记为复合！

我是出来的想法不，真的。

解决方案

确实有一个打字错误，如Frode所提到的，但您仍然需要单击其中一个选项卡如果您希望您的标签内容显示在 SubWidget 中。

我建议您更正错字，并使您的小部件子类 ContentPane 而不是 _WidgetBase 来解决这个问题，因为 ContentPane s知道如何调整自己的大小，如下所示：

  declare（'SubWidget'，[ContentPane，_TemplatedMixin，_WidgetsInTemplateMixin] {
 
 templateString：''... 
  

请参阅 http://jsfiddle.net/psoares/YwWst/

顺便说一句，没有必要在1.8中指定 widgetsInTemplate：true 。添加 _WidgetsInTemplateMixin 就够了。

Have a look at this simple fiddle:

http://jsfiddle.net/mercmobily/y4uG2/10/

Basically I declare a Widget, and start adding away sub-widgets. At one point, I have the sub-widget "section" which is a templated widget with a tab container and sub-tabs.

The main widget has:

'<div data-dojo-type="Section" data-dojo-props="title: \'Sub Widget\'" data-dojo-attach-point="section"></div>' +

And that "section" widget has:

  templateString: '' +
    '  <div>' +

    '    <div class="subWidget" data-dojo-type="dijit.layout.TabContainer" tabPosition: \'left-h\'" dojo-attach-point="tabCont" >' +

      '      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget one\'">Second Widget One</div>' +
      '      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget Two\'">Section Widget Two</div>' +

      '    </div>'+
    '    </div>'

Now, I am having a bit of a hard time getting the sub-widget, "section", to render properly. On my actual program right now I played with:

1. doTemplate
2. height attribute in CSS
3. Catching resize() from the main widget and calling resize() in the sub-widget

(About point (3), I had to do something like:

resize: function(){ this.inherited(arguments); console.log("Resize in main widget called!"); this.settingsTab.resize(); }

At this point, I am going insane and hence the question: what is the accepted, normal and common way to make sure that, in the fiddle, the sub-widget is rendered when you instantiate the main one?

PLUS, do I need to specify the height:100% for every tab container I ever use? (it looks like it)

Thank you!

UPDATE

I updated the fiddle. At this point I added a "height" to the tab container. After that, rsizing the browser window actually does the trick (!). I am not quite clear why I need that height there, but OK.

http://jsfiddle.net/mercmobily/y4uG2/16/

I also did a on() when a user clicks on the "broken" widget, and -- guess what -- resize is run and it renders fine.

This makes even less sense. Why is my own widget behaving any different than the ones defined within the template? I started all sorts of theories: height cannot be calculated because it isn't displayed, for example. But then the SAME should apply to the other tab with sub-tabs, labelled as "Complex" on the left hand side!

I am out of ideas. No, really.

解决方案

Indeed there is a typo, as Frode mentioned, but you will still need to click one of the tabs if you want your tab content to appear in the SubWidget.

I suggest that you correct the typo and make your widget subclass ContentPane rather than _WidgetBase to solve this issue, as ContentPanes know how to resize themselves, like this :

declare('SubWidget', [ContentPane, _TemplatedMixin, _WidgetsInTemplateMixin], {

      templateString: ''...

See http://jsfiddle.net/psoares/YwWst/

By the way, there is no need to specify widgetsInTemplate : true in 1.8. Adding _WidgetsInTemplateMixin is enough...

这篇关于在Dojo中，子窗口小部件不会呈现（将具有0高度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！