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