[CLOSED]Column/Header misalignment

[kfergrocks]

I have the following code.

var storelistGrid = new Ext.data.SimpleStore({
id:15,
fields: [{name: 'name', sortType: vg.listGrid._sortDate},
{name: 'price', sortType: vg.util.removeTags},
{name: 'changeA'},
{name: 'changeB'},
{name: 'changeC'},
{name: 'changeD'},
{name: 'changeE'},
{name: 'changeF'},
{name: 'changeG'},
{name: 'changeH'},
{name: 'changeI'},
{name: 'changeJ'},
{name: 'changeK'},
{name: 'changeL'},
{name: 'changeM'}]
});

var gridlistGrid = new Ext.grid.GridPanel({
store: storelistGrid,
height:300,
width:750,
view: new Ext.ux.grid.LockingGridView(),
colModel: new Ext.ux.grid.LockingColumnModel([
{header:'Client Name',dataIndex:'name',tooltip:'test title',locked: true,width:100,hidden:false,sortable:true},
{header:'price',dataIndex:'price',width:100,hidden:false,sortable:true},
{header:'change a',dataIndex:'changeA',width:100,hidden:false,sortable:true},
{header:'change B',dataIndex:'changeB',width:100,hidden:false,sortable:true},
{header:'change C',dataIndex:'changeC',width:100,hidden:false,sortable:true},
{header:'change D',dataIndex:'changeD',width:100,hidden:false,sortable:true},
{header:'change E',dataIndex:'changeE',width:100,hidden:false,sortable:true},
{header:'change F',dataIndex:'changeF',width:100,hidden:false,sortable:true},
{header:'change G',dataIndex:'changeG',width:100,hidden:false,sortable:true},
{header:'change H',dataIndex:'changeH',width:100,hidden:false,sortable:true},
{header:'change I',dataIndex:'changeI',width:100,hidden:false,sortable:true},
{header:'change J',dataIndex:'changeJ',width:100,hidden:false,sortable:true},
{header:'change K',dataIndex:'changeK',width:100,hidden:false,sortable:true},
{header:'change L',dataIndex:'changeL',width:100,hidden:false,sortable:true},
{header:'change M',dataIndex:'changeM',width:100,hidden:false,sortable:true}])
});

datalistGrid = [
['NAME1','1','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME2','2','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME3','3','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME4','4','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME5','5','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME6','6','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME7','7','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME8','8','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME9','9','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME10','10','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME11','11','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME12','12','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME13','13','A','B','C','D','E','F','G','H','I','J','K','L','M'],
['NAME14','14','A','B','C','D','E','F','G','H','I','J','K','L','M']
];

gridlistGrid.store.loadData(datalistGrid);
gridlistGrid.render('form1:listGrid');
...
<div id="form1:listGrid">
</div>


The listgrid renders properly, however if I scroll all the way to the right, the last few columns aren't aligned properly with their headers. I noticed, if I increase the height to 400, effectively eliminating the vetical scroll bar, the columns will once again align properly with their headers.

I'm using IE7 and ext 3.2.1

[kfergrocks]

I found an issue in our custom stylesheet. Sorry for any inconvenience.

[Jamie Avins]

No problem.