Dojo Toolkit：如何在AccordionContainer的ContentPane中添加dijit组件

要在ContentPane（尤其是AccordionContainer嵌套的面板）中动态添加Button等dijit组件，核心是确保父容器初始化完成，并正确调用组件的添加方法，以下是具体实现方案：

关键注意事项 #

• 等待容器初始化完成：dijit组件的addChild方法依赖父容器已完成渲染和初始化，否则会导致添加失败。优先在ContentPane的onLoad事件中执行添加操作，或确保调用addChild前父容器已调用startup。
• 正确选择添加方式：ContentPane支持两种动态添加子组件的方式：addChild方法，或直接将组件实例赋值给content属性。

完整代码示例 #

require([
    "dijit/layout/AccordionContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button",
    "dojo/domReady!"
], function(AccordionContainer, ContentPane, Button) {
    // 初始化AccordionContainer（绑定页面已有DOM节点）
    var accordion = new AccordionContainer({
        style: "width: 300px; height: 200px;"
    }, "accordionContainer");

    // 方式1：在ContentPane加载完成后用addChild添加按钮
    var pane1 = new ContentPane({
        title: "可操作面板",
        content: "初始内容"
    });

    pane1.on("load", function() {
        // 创建Button组件
        var actionBtn = new Button({
            label: "点击触发操作",
            onClick: function() {
                alert("按钮响应成功！");
            }
        });
        // 添加到ContentPane
        pane1.addChild(actionBtn);
        // 刷新容器布局，确保组件显示
        pane1.resize();
    });

    // 方式2：直接将Button作为ContentPane的content属性赋值
    var pane2 = new ContentPane({
        title: "直接绑定组件"
    });
    var anotherBtn = new Button({
        label: "另一个按钮"
    });
    pane2.set("content", anotherBtn);

    // 将面板添加到AccordionContainer
    accordion.addChild(pane1);
    accordion.addChild(pane2);

    // 启动容器，完成渲染
    accordion.startup();
});

常见问题排查 #

• 确认所有依赖模块已正确引入（比如dijit/form/Button不能遗漏）；
• 若使用addChild后组件不显示，务必调用父容器的resize()方法触发重绘；
• 避免在容器未startup前调用addChild，此时容器的DOM结构尚未完全生成，无法正确挂载子组件。

内容的提问来源于stack exchange，提问作者DARIUS