Change splitter position for contentPane in borderContainer?

Question

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.

Answer 1

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();
});

Answer 2

_layoutChildren: function(/*String?*/ changedChildId, /*Number?*/ changedChildSize){
// summary:
//      This is the main routine for setting size/position of each child.
// description:
//      With no arguments, measures the height of top/bottom panes, the width
//      of left/right panes, and then sizes all panes accordingly.
//
//      With changedRegion specified (as "left", "top", "bottom", or "right"),
//      it changes that region's width/height to changedRegionSize and
//      then resizes other regions that were affected.
// changedChildId:
//      Id of the child which should be resized because splitter was dragged.
// changedChildSize:
//      The new width/height (in pixels) to make specified child

//example:
var bc = digit.byId(‘borderContainerId’);
var newSize = 150;
var childContentPaneId = ‘myPaneId’;
dojo.hitch(bc, bc._layoutChildren(‘childContentPaneId’,newSize));