Question

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

我无法使用javascript从AccordionContainer移除儿童。

以下是我的示例代码：

 <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()函数时抛出异常。

注册表和dijit by id返回空值。

有没有办法以编程方式在AccordionContainer中添加\ remove子节点？即我的情况下的bufferPane。

任何帮助都将不胜感激。

此致 Prashant

Answer 1

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

addChild，destroyRecursive ...

所以，如果你想在手风琴中添加一个contentpane离子，使用addChild accoredionPane方法

此外，要删除父窗口小部件中的窗口小部件，最好使用dijit/registry registry.findWidgets(Parentwdiget)获取所有加密窗口小部件，然后删除所有窗口小部件或应用过滤器进行搜索通过id ....

见下面的摘录：

＆＃13;

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;
    }
    
    
    
  })

});

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#accContainer {
  height: 100% !important;
}

＆＃13;

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

＆＃13;

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

1 个答案: