Nested, complex, multi-tab layout and scrolling

[dbadke]

I am building a site that has a complex layout, with a border layout, a tree panel, multiple tabs in the center region, toolbars, and nested border layouts in the tabs. The layout is working fine (a tribute to Jack's amazing work), except for autoscroll in the content panels and tree panel. I have tried every combiniation of autoScroll and fitToFrame I can think of, and still the panels will not show scrollbars at all, or will show them for the wrong nested element.

So, here's a picture of the interface:



As you (I hope) can see, the tree panel does not have a scrollbar, the center-north panel does, the center-south panel does not. Also, the center-south panel height is less than it should be; you can see white space below where the text is cut off. I have tried turning autoScroll on for various combinations of elements; this either does nothing, or scrolls the toolbars along with the content, or, in the case of the center-south panel, only scrolls within part of the panel. I have tried adding overflow: auto to the HTML elements (that's what is scrolling the center-north panel), but this does not always work.

I guess I just don't understand the nesting of all these static and generated divs. I have looked through the generated source of the page, and everything seems to nest as it should.

Any help would be greatly appreciated!

Here is the HTML:

<div id ="container">
  <div id="tTree" class="ylayout-inactive-content">
    <div id="tree-tb"></div>
    <div id="tree-body" class="treebody"></div>
  </div>
  <div id="north" class="ylayout-inactive-content">
		[img]images/scraps-admin.png[/img]
  </div>
  <div id="tCollection" class="ylayout-inactive-content">
	  <div id="collectContent" class="ylayout-inactive-content">
	    <div id="collect-tb"></div>
	    <div id="collect-body" class="center-body scrollme"></div>
		</div>
	  <div id="collectStatus" class="ylayout-inactive-content"></div>
  </div>
  <div id="tArtifact" class="ylayout-inactive-content">
	  <div id="artifactContent" class="ylayout-inactive-content">
	    <div id="artifact-tb" class="ylayout-inactive-content"></div>
	    <div id="artifact-body" class="ylayout-inactive-content center-body scrollme"></div>
		</div>
	  <div id="artifactStatus" class="ylayout-inactive-content"></div>
  </div>
  <div id="tObject" class="ylayout-inactive-content"></div>
  <div id="tViewer" class="ylayout-inactive-content"></div>
  <div id="tLoad" class="ylayout-inactive-content">
	  <div id="loadContent" class="ylayout-inactive-content">
	    <div id="load-tb"></div>
	    <div id="load-body" class="center-body scrollme"></div>
		</div>
	  <div id="loadStatus" class="ylayout-inactive-content"></div>
  </div>
  <div id="south" class="ylayout-inactive-content"></div>
</div>

And the Javascript (partial):

    init : function(){
      layout = new YAHOO.ext.BorderLayout(document.body, {
              hideOnLayout: true,
              north: {
              split:false,
              initialSize: 88,
              titlebar: false
              },
              west: {
              split:true,
              initialSize: 200,
              minSize: 175,
              maxSize: 400,
              titlebar: true,
              collapsible: true,
              animate: true,
              autoScroll: false
              },
              south: {
              split:true,
              initialSize: 100,
              minSize: 100,
              maxSize: 200,
              titlebar: true,
              collapsible: true,
              animate: true,
              autoScroll: true
              },
              center: {
              titlebar: true,
              autoScroll: false
              }
                  });

    layout.beginUpdate();
  layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
  layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));

  var tb = new YAHOO.ext.Toolbar('tree-tb');
      ... add buttons ...
  var treePanel = layout.add('west',
                            new YAHOO.ext.ContentPanel('tTree',
                                                    {title: 'Object Hierarchy',
                                                     resizeEl:'tree-body',
                                                     toolbar: tb,
                                                     autoScroll: true}));
      var Tree = YAHOO.ext.tree;
      adminTree = new Tree.TreePanel('tree-body',
                                    {animate: true,
                                loader: new Tree.TreeLoader({dataUrl:'servlets/get-nodes.php'}),
                                enableDD: false,
                                containerScroll: true});
      adminTreeRoot = new Tree.AsyncTreeNode({text: 'Collections',
                                          draggable:false,
                                          id:'R0'});
      adminTree.setRootNode(adminTreeRoot);
      adminTree.on('click', this.showTreeClick, this);

      var innerLayout = new YAHOO.ext.BorderLayout('tCollection', {
      south: {
        split:true,
        initialSize: 100,
        minSize: 50,
        maxSize: 400,
        autoScroll: false,
        collapsible: false,
        titlebar: false
      },
      center: {
        autoScroll: false,
        titlebar: false
      }
      });
      var tb = new YAHOO.ext.Toolbar('collect-tb');
      ... add buttons ...
      var collectContent = new YAHOO.ext.ContentPanel('collectContent',
                                                      {resizeEl:'collect-body',
                                                      autoscroll: true,
                                                      fitToFrame: true});
      innerLayout.add('center', collectContent);
      innerLayout.add('south',
                      new YAHOO.ext.ContentPanel('collectStatus'));
      layout.add('center',
                new YAHOO.ext.NestedLayoutPanel(innerLayout,
                                                {title: 'Collection',
                                                toolbar: tb,
                                                  closable: false}));

      var innerLayout = new YAHOO.ext.BorderLayout('tArtifact', {
      south: {
        split:true,
        initialSize: 50,
        minSize: 50,
        maxSize: 400,
        autoScroll:true,
        collapsible:false,
        titlebar: false
      },
      center: {
        autoScroll:true,
        titlebar: false
      }
      });

      ... add more nested border layout panels as above ...
      
  layout.getRegion('center').showPanel('tCollection');
  layout.getRegion('south').hide();
  var tabs = layout.getRegion('center').getTabs();
      tabs.disableTab(layout.findPanel('tArtifact').getEl().id);
      tabs.disableTab(layout.findPanel('tLoad').getEl().id);
      tabs.disableTab(layout.findPanel('tObject').getEl().id);
      tabs.disableTab(layout.findPanel('tViewer').getEl().id);

  layout.endUpdate();

      adminTree.render();
      adminTreeRoot.expand();
    },

[tryanDLS]

You could try hideOnLayout:false. I think there are some issue related to how that affects layouts.

Your west region is autoscroll:false, but the CP is autoScroll:true and fitToFrame. Did you try just making the region autoscroll and remove the CP entries?

[dbadke]

hideOnLayout:false had no effect that I could see. I tried it on both the outer border layouts and the inner ones.

I did try making the region autoscroll, which showed the scrollbar, but then the scrollbar affected the entire region, so that the toolbar scrolled off the page along with the content. There were also scrollbars when they were unneeded, when the content fit easily in the panel.

I think my nesting of layouts must be wrong somehow...

[dbadke]

After much digging, I have figured out how to get the layout I wanted. Maybe this will be useful to others. I'm not saying this is the best way, but it does work.

My layout now looks like this:



Note the scrollbars, where they should be.

The way I did it was to have nested border layouts in each panel. The "Object Hierarchy" (west, tree) panel has a nested border layout with north and center regions, and each of the center panels has a nested border layout with north, center and south regions. The toolbars go in the north region, the main content in the center region. The south region is used for status messages.

For the "Artifact" center panel, the HTML is:

  
  <div id="tArtifact" class="ylayout-inactive-content">
      <div id="artifact-tb"></div>
      <div id="artifact-body"></div>
      <div id="artifact-status"></div>
  </div>

The Javascript is:

      // This holds Artifact data, loaded dynamically. It has a nested
      // inner layout with a center, north and south region.

      var innerLayout = new YAHOO.ext.BorderLayout('tArtifact', {
          north: {
              split: false,
              autoScroll: false,
              collapsible: false,
              titlebar: false
          },
          south: {
              split:true,
              initialSize: 50,
              minSize: 50,
              maxSize: 400,
              autoScroll:true,
              collapsible:false,
              titlebar: false
          },
          center: {
              autoScroll:true,
              titlebar: false
          }
      });
      var tb = new YAHOO.ext.Toolbar('artifact-tb');
      ... add some buttons ...
			
      // Toolbar in north region, content in center region,
      // status in south region. Center and south can scroll
      // independantly of each other.

      innerLayout.add('north',
                      new YAHOO.ext.ContentPanel('artifact-tb',
                                                 {toolbar: tb,
                                                  autoScroll: false}));
      innerLayout.add('center', 
                      new YAHOO.ext.ContentPanel('artifact-body',
                                                 {autoscroll: false}));
      innerLayout.add('south',
                      new YAHOO.ext.ContentPanel('artifact-status',
                                                 {autoscroll: false}));

      // Add the Artifact nested panel layout to the main layout
      // center region.

      layout.add('center',
                 new YAHOO.ext.NestedLayoutPanel(innerLayout,
                                                  {title: 'Artifact',
                                                   closable: false}));

Note that in the inner border layout autoscroll is true on the south and center regions, false on north, while the content panels that will go in those regions all have autoscroll false. If you have autoscroll true on the content panels, you get a horizontal scrollbar when it is not needed, which messes up the layout. With this layout the toolbars stay where they are while the other panels scroll as needed, independently of each other.

I am not entirely sure why this works, but it does work, and now I am happy again.

Ideally, a content panel with a toolbar would handle scrolling of its contents without moving the scrollbar, without the need to put the toolbar in its own region (i.e. the scrolling area would not include the toolbar). Perhaps there is a way to do this that I am missing.

Anyway, this border layout stuff is fantastic! I am telling everyone here about it, which may result in Jack receiving some well-deserved cash.

[manugoel2003]

I ran into the same problem, and ended up with the same solution.... is this really a bug Jack?? or is there a better solution?

[Thomas_K]

Same Problem Here...

[HTML]
Layout = function() {
return {
init : function() {

var mainLayout = new Ext.BorderLayout(document.body, {
north: {
split: false,
initialSize: 75
},
center: {},
south: {
split: false,
initialSize: 75
}
});
mainLayout.add('north', new Ext.ContentPanel('north-div'), {
fitToFrame: true,
closable: false
});
mainLayout.add('center', new Ext.ContentPanel('center-div'), {
fitToFrame: true,
closable: false
});
mainLayout.add('south', new Ext.ContentPanel('south-div'), {
fitToFrame: true,
closable: false
});

var grundmodulLayout = new Ext.BorderLayout('grundmodul', {
west: {
split: true,
initialSize: 220,
minSize: 220,
maxSize: 350,
autoScroll:true,
collapsible: true,
titlebar: true
},
center: {}
});
grundmodulLayout.add('west', new Ext.ContentPanel('grundmodul-nav'), {
closable: false
});
grundmodulLayout.add('center', new Ext.ContentPanel('grundmodul-content'), {
fitToFrame: true,
closable: false
});

// TABS f

[IGx89]

This thread should help you

[igo]

I have same problem with gridpanel
http://extjs.com/forum/showthread.php?t=10477

[linkkei]

Your west region is autoscroll:false, but the CP is autoScroll:true and fitToFrame. this see some tutorial