PDA

View Full Version : [CLOSED]Column/Header misalignment



kfergrocks
17 Jun 2010, 9:36 AM
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
17 Jun 2010, 10:29 AM
I found an issue in our custom stylesheet. Sorry for any inconvenience.

Jamie Avins
17 Jun 2010, 4:19 PM
No problem.