1. #1
    Ext User
    Join Date
    Mar 2008
    Location
    Estonian
    Posts
    6
    Vote Rating
    0
    tarkpea is on a distinguished road

      0  

    Default Grid in tabpanel is not scrollable

    Grid in tabpanel is not scrollable


    Dear readers,

    If anyone finds this question (my first one) stupid, please be aware that the most I hope to gain from this post is some new keywords to search with in the future. Any help with the actual matter would be extremely helpful.

    I have a viewport (screenshot 1) , where I have
    a header div in the north,
    chart panel in south,
    large map panel in center and
    data tabpanel in west.

    now it this tabpanel I have three items:
    filter in north (formpanel),
    first grid in center (gridpanel), loaded upon form submit and
    second grid in south (gridpanel), loaded when something is clicked in the first grid.

    now the problem is that as the second grid is loaded dynamically with json and usually has more than 200 rows. When the data is loaded, the second grid won't expand to the end of the screen (though it has autoHeight: true) but expands to endlessness in the bottom. Also, it will not create a scrollbar. And - when navigating downwards throurgh the records using keyboard, the whole tabpanel contents gets scrolled (screenshot 2).

    I guess I have problem with layout types but as I have tried so many combinations and it still does not work, the code is not something to look at anymore. I just hope that someone knows the issue so well that can just say what layout types I should have on the components listed before.

    Any help or hint is highly appreciated.
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So who is sizing that Grid to create the need for scrollbars?

    http://www.google.com/custom?hl=en&s...%3Az7of1ufqccu

  3. #3
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    welcome to the forums. please post relevant code in PHP or code tags so we can help

  4. #4
    Ext User
    Join Date
    Mar 2008
    Location
    Estonian
    Posts
    6
    Vote Rating
    0
    tarkpea is on a distinguished road

      0  

    Default


    Well I got it solved. But I guess with the nastiest and also the simplest hack that is possible

    After digging around the search results Animal suggested I ended up with border layout in west too but it still did not work excactly as should (as both grids needed 'space to grow'). After my monitor accidentally resized itself I noticed that what was a mess a second ago, looked just as it should look. And voila! - I call viewport.doLayout() after every grids' store load. And everything seems to work just perfect!

    I still understand that it cannot be the proper way to handle this and I'll keep on trying to find it. But as for now - it looks ok

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    If the Container that you add to has the kind of layout that sizes and positions its child Components (like border layout) then you have to call doLayout just on the Container that you add to.

Thread Participants: 2