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

[aghextjs]

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

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

[Condor]

Use:

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

}

[aghextjs]

Thanks Condor, works great!