dojocontentpaneborder-container

Change splitter position for contentPane in borderContainer?


I have 2 contentPanes inside a BorderContainer using the Dojo Toolkit. Much like the following:

<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainerB" style="height: 200px">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'top'" style="width: 100px;">Hi, I'm leading pane<br><br>Lots of stuff goes here.</div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center pane</div>
</div>

I'd like to use JavaScript to programmatically change the position of the splitter. In one case, I'd like to move it all the way to the side so only one contentPane is visible. What do I do to change the splitter position?

Already tried:

var datasetArea = document.getElementById("studiesDatasetArea");
datasetArea.style.height = newHeight + "px";

which didn't work, as well as:

dojo.widget.byId('studiesDatasetArea').resizeTo(400, newHeight);

which changes the borderContainer's size, rather than just moving the location of the splitter. I don't want to change the outer borderContainer's size.


Solution

  • I found some useful code here that answers my question:

    http://telliott.net/dojoExamples/dojo-bcExample.html

    A snippet:

    require(["dijit/registry"],
        function(registry)
    {
        var myBC = registry.byId("studiesBorderContainer"); // actual JS object
    
        var topPane = registry.byId("studiesTableArea");
        dojo.style(topPane.domNode, "height", (800-newHeight)+"px");
        myBC.resize();
    });