从声明性 AccordionContainer 中删除 child 内容窗格

Question

我已经用声明式 ContentPane 和 AccordionContainer 创建了 dojo 布局。

我无法使用 javascript 从 AccordionContainer 中删除 child。

下面是我的示例代码：

 <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">           
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" id="leftPane">
                <div data-dojo-type="dijit/layout/ContentPane">
                    <div data-dojo-type="dijit/layout/AccordionContainer" id="accContainer">
                        <div  data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Boundary'" >                            
                            ...
                        </div>                        
                        <div data-dojo-type="dijit/layout/ContentPane" id="bufferPane" data-dojo-props="title:'Works Boundary: Buffer'">
                            ...
                        </div> 
                    </div>
                </div>
                <hr>                
                <div data-dojo-type="dijit/layout/ContentPane" >
                    Area In :
                    <div id="area"></div>
                </div>
            </div>
    </div>

dom.byId("accContainer") 在使用 .getChildren() 函数获取 children 时抛出异常。

registry and dijit by id returns null values.

有什么方法可以通过编程在 AccordionContainer 中 add\remove child 节点吗？即在我的例子中是 bufferPane。

如有任何帮助，我们将不胜感激。

此致，普拉尚

Answer 1

您必须使用 dojo Widget Registry 内置方法，

addChild ,destroyRecursive ...

所以，如果您想在手风琴旁边添加一个内容窗格，使用 addChild accoredionPane 方法

此外，要删除父小部件内的小部件，最好使用 dijit/registry registry.findWidgets(Parentwdiget) 获取所有封装小部件，然后将它们全部删除或应用过滤器按 ID 搜索....

见下面的片段：

require(["dojo/on", "dojo/dom", "dojo/ready", "dijit/registry","dojo/dom-construct", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  "dijit/layout/AccordionContainer", "dijit/form/Button"
], function(On, dom, ready, registry,domConstruct, BorderContainer, ContentPane, AccordionContainer, Button) {
  ready(function() {
    var accordionContainer = registry.byId("accContainer");
    
    registry.byId("add").on("click",function(e){
      accordionContainer.addChild(addContentPane('Pane Sample'));
    })
    
    registry.byId("remove").on("click",function(e){
      //console.log(accordionContainer);
      var widgets = registry.findWidgets(dom.byId("accContainer"));
      if(widgets.length > 0) {
        widgets[widgets.length - 1].destroyRecursive();
      }
      //widgets[0].destroyRecursive();*/
    })
    
    registry.byId("removeBuffer").on("click",function(e){
      widgetid = 'bufferPane';
    
      var widgets = registry.findWidgets(dom.byId("accContainer"));
      console.log(widgets);
      var widget = widgets.filter(widget => widget.id === widgetid+'_wrapper');
      if(widget[0])widget[0].destroyRecursive();
      
    });
    
    
    addContentPane = function(title) {
      contentPanel = new ContentPane({title:title,content:'Some Text here'});
      return contentPanel;
    }
    
    
    
  })

});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#accContainer {
  height: 100% !important;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 100%">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" id="leftPane">
      <div data-dojo-type="dijit/layout/ContentPane">
        <div data-dojo-type="dijit/layout/AccordionContainer" id="accContainer" style="height: 100%">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Boundary'">
            ...
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" id="bufferPane" data-dojo-props="title:'Works Boundary: Buffer'">
            ...
          </div>
        </div>
      </div>
      <hr>
      <div data-dojo-type="dijit/layout/ContentPane">
        Area In :
        <div id="area"></div>
        
        <div data-dojo-type="dijit/form/Button" id="add">Add</div>
        <div data-dojo-type="dijit/form/Button" id="remove">Remove Last</div>
        <div data-dojo-type="dijit/form/Button" id="removeBuffer">Remove Buffer Pane</div>
      </div>
    </div>
  </div>
</body>

从声明性 AccordionContainer 中删除 child 内容窗格

Remove child content pane from declarative AccordionContainer

javascript

dojo