Dojo Dijit - 小部件中的小部件

Posted 2023-02-26

【中文标题】Dojo Dijit - 小部件中的小部件

【英文标题】：Dojo Dijit - Widget within a widget

【发布时间】：2012-12-04 12:23:08

【问题描述】：

我使用的是 OneUI，它基本上只是 dojo didjit 小部件的扩展。

我需要将一个小部件放入一个小部件中。 我正在使用带有 data-dojo-type="dojo.store.Memory" 的 div。 然后我使用 data-dojo-props 设置这个的各种元素。 例如，我在 data-dojo-props 中设置了一些跨度和链接。 这些工作和显示都很好。 我现在正在尝试添加一个 div，它本身就是一个小部件。所以我添加了 div 并在这个 div 中将 data-dojo-type 设置为 HoverHelpToolTip 并设置一些其他元素，例如 onmouseover 和一些 data-dojo-props。

基本上应该发生的是，悬停帮助工具提示应该在鼠标悬停时弹出 - 但它根本不起作用。

所以我想我的问题是如何正确地将一个小部件嵌套在另一个小部件中？

谢谢

示例代码

我声明如下...

<div data-dojo-id="store1819454249457680384" data-dojo-type="dojo.store.Memory"     id="store1819454249457680384" data-dojo-props="data:["Name":"<!--o3nv-->&nbsp;","id":1,"gender":"Female","ActionColumn":"<span class=\"actions\" ><a href=\"...\" onclick=\"...\" title=\"Click here to edit this item\" >Edit<\/a><span class=\"linksDivider\" > | <\/span><a href=\"#\" onclick=\"...\" title=\"Click here to delete this item\" >Delete<\/a><\/span>","Person.firstName":"werrwewre",

<!-- This is the start of the code in question -->

"HelpColumn":"<div class=\"hiddenHelpDialog\" data-dojo- props=\"forceFocus:true,connectId:['helpAnchor_rowHelp10309939']\" data-dojo- type=\"idx\/oneui\/HoverHelpTooltip\" id=\"rowHelp10309939\" style=\"text-align: left;  position:relative; display:none\" widgetid=\"rowHelp10309939\" ><div  class=\"helpDivDialog\" ><p class=\"helpFieldHeadingDialog\" >\u00a0<\/p><p  class=\"helpDescriptionTextDialog\" >BLAH BLAH BLAH BLAH<\/p><\/div><\/div><a  class=\"openHelpLink openHelpLinkDisplayField\" id=\"helpAnchor_rowHelp10309939\"  onmouseover=\"idx.oneui.HoverHelpTooltip.defaultPosition=['above']\" ><\/a>"]" ><!-- comment--></div>

它会生成以下 html，除了没有出现 HoverHelpTip 之外，这些 HTML 可以正常工作。 onmouseover 正在触发。就像小部件没有在 dojo 中注册一样？！？！

<div widgetid="rowHelp1248193624" style="text-align: left; position:relative; display:none" id="rowHelp1248193624" data-dojo-type="idx/oneui/HoverHelpTooltip" data-dojo-props="forceFocus:true,connectId:'helpAnchor_rowHelp1248193624'" class="hiddenHelpDialog">        <div class="helpDivDialog">
<p class="helpFieldHeadingDialog">&nbsp;</p>
<p class="helpDescriptionTextDialog">BLAH BLAH BLAH BLAH</p></div></div>
<a class="openHelpLink openHelpLinkDisplayField" id="helpAnchor_rowHelp1248193624" onmouseover="idx.oneui.HoverHelpTooltip.defaultPosition=['above'];">
<span class="hidden">&nbsp;</span></a>

【问题讨论】：

你能提供一些代码（fiddle 会很棒），这说明了这个问题吗？此外，在我看来，您已经以声明方式完成了所有工作，我想这似乎不是理想的方法......

HoverHelpTooltip 声明为 display:none 样式，onmouseover 改变了 defaultPosition。也许您应该将显示设置为阻塞或内联。

【参考方案1】：

当 dojo 准备好时，我通过在 DOM 节点上调用 parser.instantiate(node) 来解决此问题。 我不知道为什么，但由于某种原因，小部件没有被拾取/解析。

我检查了 dijit.registry 并没有提及它，使用 dijit.byid 的查找返回未定义。 然而，显式实例化节点有效。 有人知道为什么吗？？？？