当某些事件发生时，在边界容器内显示尾随区域

Showing trailing region inside bordercontainer when some event occurrs

本文关键字：显示 区域 边界 事件      更新时间：2023-09-26

我在一个边界容器中有三个内容窗格，它们的区域分别指定为left,right和center。现在我想保持只有左侧和中心区域的内容窗格显示默认情况下，但当一些甚至发生，我想打开右侧的内容窗格。这是我尝试使用这个，我能够保持右侧区域隐藏为默认值，但当事件发生时它不会显示。

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:

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

play with addchild/removeChild method of BorderContainer:

require([
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "dojo/on",
    "dojo/domReady!"
], function(BorderContainer, ContentPane, dom, on){
    // create a BorderContainer as the top widget in the hierarchy
    var bc = new BorderContainer({
        style: "height: 300px; width: 500px;"
    });
    // create a ContentPane as the left pane in the BorderContainer
    var cp1 = new ContentPane({
        region: "left",
        style: "width: 100px",
        content: "Left"
    });
    bc.addChild(cp1);
    // create a ContentPane as the center pane in the BorderContainer
    var cp2 = new ContentPane({
        region: "center",
        content: "Center"
    });
    bc.addChild(cp2);
  
    // create a ContentPane as the right pane in the BorderContainer
    // but we don't add it to the borderContainer
    var cp3 = new ContentPane({
        region: "right",
        style: "width: 100px",
        content: "Right"
    });
  
    // put the top level widget into the document, and then call startup()
    bc.placeAt(document.body);
    bc.startup();
 
    on(dom.byId("toggleLink"), "click", function() {
      if(bc.getIndexOfChild(cp3) >= 0) {
         //right panel is there, we remove it  
         bc.removeChild(cp3);
      } else {
         //right panel should be 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>

相关文章：