Content pane in dojo

Question

Content pane in dojo

163 Views Asked by Java_Pro At 12 April 2025 at 19:43

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

Original Q&A

There are 1 best solutions below

**Bourbia Brahim** · Answer 1

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");
    var tab2;
    btn.on("click", function(e){
      // if pane exist skip creation 
      if(!registry.byId("legendid")) {
        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>

Content pane in dojo

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DOJO

Related Questions in CONTENTPANE

Trending Questions

Popular # Hahtags

Popular Questions