PDA

View Full Version : [CLOSED] Horizontal grid scrolling misaligns column with headers and vert. scrollbar



ayqazi
11 Aug 2011, 4:14 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.2a


Browser versions tested against:

FF3.6
Chromium 14


Description:

If you have a grid, and resize it by setting a new height and and redoing its layout, and it has a vertical scroll bar and horizontal scroll bar showing, the actual columns do not stay aligned when you reach the absolute end of your horizontal scroll.


Steps to reproduce the problem:

Have a grid with horizontal and vertical scrollbars
See below code - add a hook to change the height based on window size
Resize window
Check the horizontal and vertical scrollbars are still showing
Horizontally scroll to the right all the way to the end
Select one of the right-most cells to test cell alignment
Observe the alignment of the actual data cells with the headers - they are misaligned


HELPFUL INFORMATION


Screenshot or Video:

Please watch this video for a demo:
http://www.youtube.com/watch?v=vvzsGccUcC0


Sample Code


Ext.onReady(function() {
var dataItems = []
for(var i = 0; i != 1000; ++i) {
dataItems.push({name: "Name "+i, phone: '555-'+i})
}
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'phone'],
data: {
'items': dataItems
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Names',
store: store,
selType: 'cellmodel',
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 1000
},
{
header: 'Phone',
dataIndex: 'phone'
}
],

renderTo: 'container',

manageResize: function() {
var windowHeight = window.innerHeight - 30;
if(!windowHeight) {
windowHeight = document.documentElement.clientHeight - 30;
}
var newGridHeight = windowHeight - this.getEl().getTop();
if(newGridHeight < 200) {
newGridHeight = 200;
}
this.setHeight(newGridHeight);
this.doLayout();
}

});

Ext.EventManager.onWindowResize(grid.manageResize, grid);
grid.manageResize();
});

ayqazi
11 Aug 2011, 6:28 AM
Bug updated! It is only triggered after the grid is resized.

aq2.sanger
9 Sep 2011, 8:08 AM
I can confirm that this bug still exists in extjs 4.0.6

mdlincoln
9 Sep 2011, 12:04 PM
We have confirmed this issue and created a bug report for it.