PDA

View Full Version : Scrolling Panels



GregT
5 Feb 2010, 5:26 AM
This code displays a Grid with a small Panel of text above it. When you enter the Grid, click a row and use the down arrow key to scroll off the bottom, the Panel above the Grid scrolls out of sight, which is wrong.

You can fix this by commenting out the 'anchor: '100% 100' option in panelB, but that causes the Grid to not fill the Viewport anymore. How can you fill the Viewport _and_ keep scrolling working properly? (The 'autoscroll' property doesn't seem to help).



Ext.onReady(function () {

var panelA = new Ext.Panel({
html: 'wtf wtf wtf'
});

var panelB = new Ext.Panel({
anchor: '100% 100%',
layout: 'anchor',
});

panelB.add (new Ext.grid.GridPanel({
anchor: '100% 100%',
columns: [ {header: 'seq', dataIndex: 'seq'} ],
height: 350,
store: getStore()
}));

var viewport = new Ext.Viewport({
items: [panelA, panelB],
layout: 'anchor'
});

})

function getStore() {

var myStore = new Ext.data.ArrayStore({
fields: ['seq']
});

var myData = [];

for(var i = 0;i < 50;i++) {
myData.push ([i]);
}

myStore.loadData(myData);

return myStore;

}

tobiu
5 Feb 2010, 5:50 AM
you should not put 2 panels in viewport items.
try one container there with a table-layout (2 rows) and insert panelA and panelB there.

kind regards,
tobiu

smokeman
5 Feb 2010, 7:24 AM
I've had more luck with the column layout which seems to support autoScroll better.
see my thread here:
http://www.extjs.com/forum/showthread.php?t=90739

GregT
5 Feb 2010, 7:42 AM
Thanks for the suggestions, deeply appreciated.

I did originally have only the single Viewport item, that didn't make any difference. However, I didn't try the alternate layouts, I will give that whirl.

As a general comment, maybe it's just me, but if I have spent 100 hours banging my head against the wall on Ext, 99 of them have been directly related to layout managers. No matter how many times or carefully I read the documentation.

tobiu
5 Feb 2010, 8:39 AM
you can put the suggested layout to a panel that is inside the viewport.

did you try out the layouts-example? might be helpful:
http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

kind regards,
tobiu

GregT
9 Feb 2010, 12:45 PM
Thanks tobui, I just wanted to let you know, I finally solved this by updating to the latest Ext (3.1.1).

Cheers from Canada;
Greg

GregT
10 Feb 2010, 9:17 AM
Oh, one last thing. You said:


you should not put 2 panels in viewport items.

Animal implied this on another thread as well (though I'm not certain he meant this as an absolute rule). In any case, this advice is contrary to the Viewport documentation, which has a lengthy example showing a Viewport with five directly contained panels, managed by a border layout.

tobiu
10 Feb 2010, 9:54 AM
sorry, i have read too fast.

with layout: 'anchor' this is ok of course.
somehow thought you wrote 'fit' ;)

kind regards,
tobiu