0

我有一个以编程方式添加内容窗格的手风琴。在其中一个窗格中，我想添加一个包含许多选项卡的选项卡容器。每个选项卡都有许多需要动态创建的控件。但是以动态的方式创建它让我很难过。我决定采用不同的方法使用 domConstruct.place 添加它。我以声明方式完成了代码的设计，并将其放在每个选项卡的单独 html 页面中。然后，我尝试将整个选项卡容器作为孩子添加到现有手风琴的内容窗格中。

屏幕上仅显示文本内容，但没有选项卡容器控件。

这是代码：

require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dgrid/Selection", 
            "dgrid/Keyboard", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Memory", "dijit/registry", "dgrid/extensions/DijitRegistry", 
            "dgrid/extensions/Pagination", "dgrid/extensions/CompoundColumns", "dgrid/extensions/ColumnResizer", "dojo/dom-construct", "dojo/text!../App/tab.html", "dojo/domReady!"],
                function(Grid, ContentPane, AccordionContainer, TabContainer, Button, Selection,
                        Keyboard, declare, JsonRest, Observable, Memory, registry, DigitRegistry, 
                        Pagination, CompoundColumns, ColumnResizer, domConstruct, tabHtml){

                    var aContainer = registry.byId('accord');

                    if (!aContainer) {
                        console.log('Accordion does not exist');
                        aContainer = new AccordionContainer({style:"width: auto; height: 680px;"}, "accord");
                    }

//Grid creation part goes here. Grid appears and events works.

var cpid = "acordcp1_tc_cp1_" + getRandomNumber();
var cp1 = new ContentPane({id: cpid, title: "pane1", content: grid});

aContainer.addChild(cp1);
aContainer.startup();
aContainer.selectChild(cp1);
aContainer.resize();

console.log("TAB HTML", tabHtml);
var tb1 = domConstruct.create("div", {innerHTML: tabHtml}, cpid, "first");

}

//这是来自 dojotoolkit 教程的示例选项卡容器声明性代码，我试图在手风琴的内容窗格中获取它。

<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
        Lorem ipsum and all around...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
        Lorem ipsum and all around - second...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
        Lorem ipsum and all around - last...
    </div>
</div>

但我得到的是：

Lorem ipsum 和周围... Lorem ipsum 和周围-第二... Lorem ipsum 和周围-最后...

是的，只有文本与网格控件一起出现在手风琴的内容窗格中。

我的道场配置也是：

<script type="text/javascript"
    djconfig="isDebug: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>

我究竟做错了什么？

这种方法不正确吗？有什么建议？

我真的很感激帮助。谢谢。

内存

4

1 回答 1

1

dojo 解析器将您的标记转换为 dojo 小部件和 dijit。它在页面加载时运行一次。将其添加到页面后，您需要在标记上运行它。你有两个选择。

  1. 等待运行解析器。在配置中将 parseOnLoad 设置为 false，然后在添加标记后在代码中调用 parser.parse()。

  2. 在新的 div 上再次运行解析器。

    parser.parse(tb1)

如果您有其他需要首先显示的声明性代码，则第二种方法是必要的。

于 2013-10-03T21:23:17.317 回答