PDA

View Full Version : Grid Scrolling Problem



GregT
3 Feb 2010, 12:31 PM
Can someone point out why scrolling does not work properly (in my opinion) with this code (which should work as-is; I have stripped it down almost to the bare minimum) ?

When you go into the column of numbers and scroll down, the text 'This should not scroll away!' disappears off the top of the browser, which I think everyone would agree is not right. I have tried fiddling with layouts, the autoScroll property, etc. to no avail.



Ext.onReady(function () {

var centerPanel = new Ext.Container({
layout: 'card',
region: 'center',
});

var viewport = new Ext.Viewport({
items: [centerPanel],
layout: 'border'
});

var panelA = new Ext.Panel({
html: 'This should not scroll away!',
});

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

var tabPanel = new Ext.TabPanel({
anchor: '100% 100%',
});

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

tabPanel.add(newTab).show();
panelB.add(tabPanel);
panelB.doLayout();
centerPanel.items.add(panelB);
centerPanel.getLayout().setActiveItem(0);
centerPanel.doLayout();
tabPanel.getLayout().setActiveItem(0);

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

var myData = [];

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

myStore.loadData(myData);

newTab.add (new Ext.grid.GridPanel({
anchor: '100% 100%',
columns: [ {header: "Seq", width: 120, dataIndex: 'seq'} ],
store: myStore
}));

newTab.doLayout();

})


Many thanks!

jay@moduscreate.com
8 Feb 2010, 12:02 PM
it works for me perfectly: http://tdg-i.com/img/screencasts/2010-02-08_1501.mp4

GregT
8 Feb 2010, 12:48 PM
Thanks for trying this out. May I ask what versions (FF/Ext) you got it to work with? For me, it has been absolutely consistently screwed up, but I have not tried different versions.

jay@moduscreate.com
8 Feb 2010, 12:54 PM
Fx 3.6 and Ext 3.1+ (SVN)

what are you using?

GregT
8 Feb 2010, 1:21 PM
That's on a different PC; I'll check tonight when I get back to it. Thanks again for looking at this; this problem is driving me insane, I'll be very glad to sort it out.

GregT
9 Feb 2010, 5:05 AM
FF 3.5.5 and Ext 3.0.0

Just to clarify, you did not change the example code at all, you just pasted it and it ran with no problems?

Animal
9 Feb 2010, 6:33 AM
Layers of overnest.

TabPanel is a Container.

GridPanel is a BoxComponent.

Containers contain Components.

That much is obvious?

So.

Add the GridPanel to the TabPanel.

Why did you go to the trouble of inserting it INTO another Panel?

That TabPanel should be the SOLE child item of a layout: 'fit' Viewport.

GregT
9 Feb 2010, 6:55 AM
Why did you go to the trouble of inserting it INTO another Panel?

Because in real life there are some controls in the TabPanel besides just the GridPanel. This was a simplified example.

In the real app I do not believe there is any overnesting. Nesting, to be sure, but it all seems to be necessary.

Besides, it seems to me unnecessary nesting might be nonperformant and ugly, but it shouldn't cause seemingly random behaviour problems, should it?

GregT
9 Feb 2010, 6:59 AM
FYI, here http://www.extjs.com/forum/showthread.php?t=91392 is another version of the same problem with substantially less and cleaner code.

Animal
9 Feb 2010, 8:28 AM
So add those controls to the TabPanel.

I did not ask you that.

I asked why you wrapped the GridPanel in a Panel and then added that extraneous wrapping Panel into the TabPanel.

GregT
9 Feb 2010, 12:03 PM
Thank you both again for looking at this issue. Here is an even simpler example with no excessive nesting whatsoever (unless I am completely missing something here), only one Viewport item, the Viewport uses 'fit', and it still has the problem.

The problem occurs if you click the first row in the grid (the one that contains a '0'), and then use the down-arrow key to scroll past the bottom of the browse. The Gridpanel should scroll, but the TextField should not (it does, though).

It happens the same with FF 3.5.3. I am toying with trying a more recent Ext release.



Ext.onReady(function () {

panel = new Ext.Panel({
layout: 'anchor'
});

panel.add(new Ext.form.Label({
text: 'wtf'
}));

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

var viewport = new Ext.Viewport({
items: [panel],
layout: 'fit'
});

})

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;

}

GregT
9 Feb 2010, 12:10 PM
One more thing: dragging the scroll bar works fine. Page Down works fine. The mouse scroll wheel works fine. This problem seems to be specific to the down-arrow key.

Also;

1. Identical problem in IE7.

2. Identical problem with Ext 3.1.1.

GregT
9 Feb 2010, 12:42 PM
Pardon me, if you're still with me... I neglected one step... Ext 3.1.1 actually does fix this problem.

With or without crazy nesting, multiple panels in the Viewport, etc. This seems to be 100% consistent, it breaks when I put 3.0.0 back.

So problem solved, thanks for your input :)