Изменить положение разделителя для contentPane в borderContainer?
У меня есть 2 ContentPanes внутри BorderContainer, используя Dojo Toolkit. Очень похоже на следующее:
<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>
Я хотел бы использовать JavaScript для программного изменения положения разделителя. В одном случае я бы хотел переместить его полностью в сторону, чтобы была видна только одна панель содержимого. Что мне сделать, чтобы изменить положение сплиттера?
Уже попробовал:
var datasetArea = document.getElementById("studiesDatasetArea");
datasetArea.style.height = newHeight + "px";
который не работал, а также:
dojo.widget.byId('studiesDatasetArea').resizeTo(400, newHeight);
который изменяет размер borderContainer, а не просто перемещает местоположение разделителя. Я не хочу менять размер внешнего borderContainer.
2 ответа
Решение
Я нашел здесь полезный код, который отвечает на мой вопрос:
http://telliott.net/dojoExamples/dojo-bcExample.html
Фрагмент:
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();
});
_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));