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.
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