javascript - Showing trailing region inside bordercontainer when some event occurrs -
i have 3 content pane inside border container , have region specified left,right , center.now want keep left , center region content pane displayed default when occurs want open right content pane well. here have tried using able keep right region hidden default not getting displayed when event occurs.
div id="applayout" data-dojo-attach-point="_bordercontainer" data-dojo-type="idx/layout/bordercontainer" class="contentpane dblayout-left" data-dojo-props="design: 'headline'" > <div id="leftcol" class="edgepanel" data-dojo-type="dijit/layout/contentpane" style="width:23%" data-dojo-props="region: 'left',splitter: true"> left pane </div> <div data-dojo-type="dijit/layout/contentpane" data-dojo-attach-point="customitemproparea" data-dojo-props="region: 'right', splitter: true, open:false" style="width:25%;"> right pane </div> <div class="centerpanel" data-dojo-type="dijit/layout/contentpane" data-dojo-props="region: 'center', splitter: true"> center pane </div> </div>
javascript event:
this.connect(this.searchresults,"onrowclick",function(){ this.customitemproparea.set("open",true); var splitter = this.customitemproparea._splitterwidget; console.log("splitter: "+splitter); domstyle.set(splitter.domnode, "display", ""); }
just play addchild
/removechild
method of bordercontainer
:
require([ "dijit/layout/bordercontainer", "dijit/layout/contentpane", "dojo/dom", "dojo/on", "dojo/domready!" ], function(bordercontainer, contentpane, dom, on){ // create bordercontainer top widget in hierarchy var bc = new bordercontainer({ style: "height: 300px; width: 500px;" }); // create contentpane left pane in bordercontainer var cp1 = new contentpane({ region: "left", style: "width: 100px", content: "left" }); bc.addchild(cp1); // create contentpane center pane in bordercontainer var cp2 = new contentpane({ region: "center", content: "center" }); bc.addchild(cp2); // create contentpane right pane in bordercontainer // don't add bordercontainer var cp3 = new contentpane({ region: "right", style: "width: 100px", content: "right" }); // put top level widget document, , call startup() bc.placeat(document.body); bc.startup(); on(dom.byid("togglelink"), "click", function() { if(bc.getindexofchild(cp3) >= 0) { //right panel there, remove bc.removechild(cp3); } else { //right panel should added bc.addchild(cp3); } }); });
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"> <body class="claro"> <button id="togglelink">toggle right pane</button> </body>
Comments
Post a Comment