1

I'm using two panes (grid and details) as master-details pattern. Now I'm trying to create "Details on the right" or "Details on the bottom" toggle button. I do this by changing the region attribut of the ContentPane, like so:

function toggleDetails() {
     if(dijit.byId("Details").region == "right") {
        dijit.byId("Details").set("region", "bottom");
        dojo.byId("Details").style.height = "200px";
     }
     else {
         dijit.byId("Details").set("region", "right");
         dojo.byId("Details").style.width = "400px";
     }
     dijit.byId("DetailsParent").resize();
 }

The panes themselves are changing fine. The problem is that I have a splitter for the details pane. When toggling, the splitter is ok for the original orientation, but doesn't render correctly for the alternate orientation. Any solution to refresh the splitter orientation based on the contentPane region?

I have tried programmatically changing some of splitter widget attributes, like "horizontal" and "region", but nothing really fixed the alternate orientation.

user1094586
  • 11
  • 3

1 Answers1

0

A possible solution could be by using removeChild and addChild like in this example

        if (isVertical) {

            // vertical layout 

            this.ap_MainContainer.removeChild(this.ap_TopContainer);

            this.ap_TopContainer.region = 'top';

            this.ap_MainContainer.addChild(this.ap_TopContainer);

        } else {

            // horizontal layout

            this.ap_MainContainer.removeChild(this.ap_TopContainer);

            this.ap_TopContainer.region = 'left';

            this.ap_MainContainer.addChild(this.ap_TopContainer);
        }
Wolfgang
  • 1