1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    dbadke is on a distinguished road

      0  

    Default Nested, complex, multi-tab layout and scrolling

    Nested, complex, multi-tab layout and scrolling


    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:

    Code:
    <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):

    Code:
        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();
        },
    David Badke
    Humanities Computing and Media Centre
    University of Victoria, BC, Canada

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    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?

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    dbadke is on a distinguished road

      0  

    Default


    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...
    David Badke
    Humanities Computing and Media Centre
    University of Victoria, BC, Canada

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    dbadke is on a distinguished road

      0  

    Default Figured it out

    Figured it out


    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:

    Code:
      
      <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:

    Code:
          // 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.
    David Badke
    Humanities Computing and Media Centre
    University of Victoria, BC, Canada

  5. #5
    Ext User manugoel2003's Avatar
    Join Date
    Mar 2007
    Location
    New Delhi, India
    Posts
    314
    Vote Rating
    0
    manugoel2003 is on a distinguished road

      0  

    Default


    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?
    Manu Goel
    manugoel2003 [at] gmail [dot] com
    http://www.linkedin.com/in/manugoel

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    44
    Vote Rating
    0
    Thomas_K is on a distinguished road

      0  

    Default


    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

  7. #7
    Ext User
    Join Date
    May 2007
    Location
    Minnesota
    Posts
    66
    Vote Rating
    0
    IGx89 is on a distinguished road

      0  

    Default


    This thread should help you

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    12
    Vote Rating
    0
    igo is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User linkkei's Avatar
    Join Date
    Aug 2011
    Location
    City
    Posts
    2
    Vote Rating
    0
    linkkei is on a distinguished road

      0  

    Default


    Your west region is autoscroll:false, but the CP is autoScroll:true and fitToFrame. this see some tutorial
    Living and Learning and teaching!
    linkkei.com - Forum linkkei

Similar Threads

  1. Border Layout Scrolling Problem
    By adb8640 in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 22 May 2007, 3:32 AM
  2. how to add a gridpanel to complex layout
    By humpdi in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 23 Mar 2007, 5:54 AM
  3. Complex Layout
    By hcervantes in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Mar 2007, 7:02 AM
  4. Problem occurred while using dialog in layout complex layout
    By davy_wei in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 4 Jan 2007, 7:29 AM
  5. Using dialog in layout complex layout, please help me, jack!
    By davy_wei in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 3 Jan 2007, 9:31 PM

Thread Participants: 6