1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Thumbs up [SOLVED] Two ToolBars in GridPanel - Bottom of scrollbar hidden

    [SOLVED] Two ToolBars in GridPanel - Bottom of scrollbar hidden


    I have a GridPanel and I need to put two scrollbars at the top. I have done that by adding a second scrollbar to the GridPanel on the 'render' event. The toolbar displays, which is great, but what then happens is that the scrollbar and the bottom of the grid gets cut-off and is not visible, so you can't get to the bottom of the grid.

    I see what is happening is that the div with class "x-grid3" height doesn't take into account the extra toolbar that is part of the panel-body, and/or (depending on how you want to look at it) that the scroller height doesn't take into account the extra toolbar.

    My grid is part of layout like this (tabpanel w/3 columns, each column having a grid):

    Code:
    Panel - layout: border, plugin: FitToParent
      TabPanel - region: center, layout: fit
         Tab - layout: hbox
           grid1 - flex:2
           grid2 - flex:3
           grid3 - flex:4
    Before I had each grid nested in a panel w/layout of hbox so that I could get the second toolbar - one from the panel and one from the grid. I was trying to reduce my nesting by adding a second toolbar to the GridPanel directly, but now I have these scroll issues.

    Is there some way to fix the scroll issue w/two toolbars on the top of a gridpanel, or do I need to go back to my more nested design? (Which, looking back on, maybe panel w/layout 'fit' would work better?).

    thanks,
    Annie
    Last edited by aghextjs; 20 Aug 2010 at 10:31 AM. Reason: trying to fix indentation on layout; solved!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Use:
    Code:
    tbar: {
      xtype: 'container',
      layout: 'anchor',
      defaults: {anchor: '0'},
      defaultType: 'toolbar',
      items: [{
        items: [...] // toolbar 1
      }, {
        items: [...] // toolbar 2
      }]
    }
    }

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    Thanks Condor, works great!

Similar Threads

  1. bottom scrollbar in gridPanel
    By Vichingo in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 28 Nov 2008, 8:29 AM
  2. Gridpanel bottom scrollbar
    By bhaskar1605 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 7 Oct 2008, 7:20 AM
  3. Bottom Scrollbar Arrow Hidden By Browser
    By mstead in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 17 Sep 2008, 5:27 AM
  4. [CLOSED] Bottom of Scrollbar hidden in DataList
    By Zorn in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 2 Aug 2008, 10:04 AM
  5. Adding 2 toolbars to GridPanel.tbar removes horiz scrollbar
    By Ephicient in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 10 Feb 2008, 12:11 PM

Thread Participants: 1

Tags for this Thread