2

看看这个简单的小提琴：

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

基本上我声明了一个小部件，并开始添加子小部件。有一次，我有子小部件“部分”，它是一个带有标签容器和子标签的模板化小部件。

主要小部件有：

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

而那个“部分”小部件有：

  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>'

现在，我很难让子小部件“部分”正确渲染。在我现在的实际程序中，我玩过：

  1. 做模板
  2. CSS 中的高度属性
  3. 从主小部件捕获 resize() 并在子小部件中调用 resize()

（关于第（3）点，我不得不做类似的事情：

调整大小：函数（）{ this.inherited（参数）；console.log("在调用的主小部件中调整大小！"); this.settingsTab.resize(); }

在这一点上，我要疯了，因此问题是：什么是公认的、正常的和常见的方法来确保在你实例化主小部件时渲染子小部件？

另外，我是否需要为我曾经使用过的每个标签容器指定 height:100% ？（看起来像）

谢谢！

更新

我更新了小提琴。此时，我向选项卡容器添加了“高度”。在那之后，调整浏览器窗口的大小实际上可以解决问题（！）。我不太清楚为什么我需要那个高度，但是好的。

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

当用户单击“损坏的”小部件时，我还做了一个 on()，并且 - 猜猜是什么 - 运行调整大小并且它呈现得很好。

这更没有意义。为什么我自己的小部件的行为与模板中定义的有任何不同？我开始了各种各样的理论：例如，高度无法计算，因为它没有显示出来。但是，SAME 应该适用于带有子选项卡的另一个选项卡，在左侧标记为“复杂”！

我没主意了。不完全是。

4

2 回答 2

4

确实有一个错字，正如 Frode 所提到的，但是如果您希望您的标签内容出现在SubWidget.

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

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

      templateString: ''...

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

顺便说一下，1.8中不需要指定widgetsInTemplate : true。添加_WidgetsInTemplateMixin就够了...

于 2012-12-01T15:16:27.210 回答
0

SubWidget 中的 templateString 有错字。难道就这么简单吗？

...<div style="height:100%" data-dojo-type="dijit.layout.TabContainer" tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >'...

应该是：

<div style="height:100%" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >'

这似乎在你的小提琴中起到了作用：http: //jsfiddle.net/y4uG2/18/

于 2012-12-01T14:59:28.220 回答