Content pane in dojo

Question

I have a content pane (B) that is created when I click a button which is inside another content pane( A) in tab container.

In B I have used closeable to true and also on close function .now when I close B it is working fine but my requirement is that if I click button in A , B should be created again how I can do this .I have tried by assigning null to content pane variable in on close function so that new content pane is created again but giving error can not read property of null owner document

where is your code ? could you post what have you tried here ? — Bourbia Brahim, Mar 23 '22 at 09:57
tabcontainer tc in which created contentpane (cp) .In this cp (tab8) have created a button with label Show Layer List when click button a new cp is created in which closable is set to true.now my requirement is when closable is clicked it should be closed than again showlayerlist is clicked same cp or new cp is to be shown tab8=new ContentPane({title:"Legend",id:"legendid" });tc.addChild( tab8 ); tab8.addChild( new dijit.form.Button({"label": "Show Layer List",id:"LayerListBtn", onClick: function(){ showLayerListFunction( layerList, LayerList, defineActions, dom); } })); — Java_Pro, Mar 25 '22 at 12:16
can you edit the question and post the whole code , otherwise we can't help ! — Bourbia Brahim, Mar 28 '22 at 10:57
Please provide enough code so others can better understand or reproduce the problem. — Community, Mar 29 '22 at 06:27

score 0 · Answer 1 · answered Mar 28 '22 at 10:56

I think your problem is inside showLayerListFunction ,

See below example in which your can recreate tab after its deletion

require(["dojo/on", "dojo/dom", "dojo/ready", "dijit/registry","dojo/dom-construct", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dijit/form/Button",
  "dojo/dom-style"
], function(On, dom, ready, registry,domConstruct, TabContainer, ContentPane,  Button, domStyle) {
  ready(function() {
    var tabContainer = registry.byId("center");
    var tab1 = registry.byId("tab1");
    
    var btn = registry.byId("show");
    
    btn.on("click", function(e){
      // if pane exist skip creation 
      if(!registry.byId("legendid")) {
        var tab2 = new ContentPane({title:"List",id:"legendid",closable:true });
        tabContainer.addChild(tab2);
        tabContainer.selectChild(tab2)
      }
    })
    
  });
});

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

#center {
  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="center" data-dojo-type="dijit/layout/TabContainer" >
<div id="tab1" data-dojo-type="dijit/layout/ContentPane"  title="tab1">
  <div data-dojo-type="dijit/form/Button" id="show"> Show Layer List</div>
</div>
</div>
</body>

thanks for response i am getting below error Uncaught TypeError: Cannot read properties of null (reading 'ownerDocument') btn.on("click",function(e){ if(!registry.byId("layerListID")){ var tab2= new ContentPane({ title: "Layers", id: "layerListID", closable: true, onShow: function () { if (layerList === undefined) { layerList = new LayerList({ view: view, listItemCreatedFunction: defineActions }, dom.byId("layerListID")); }; } }, "layers"); tc.addChild(tab2); tc.selectChild(tab2); } — Java_Pro, Mar 30 '22 at 12:23

Content pane in dojo

1 Answers1