Hi,

I have a grid that work perfectly in IE7 and IE9, but in IE8 its showing hidden columns without header which causing inconsistency of alignment of data in grid.

Here is the code:
Code:
items:[        {
        xtype: 'grid',  
        id:'summaryPanel',            
        cls: 'custom-grid',
        width: 640,
        height: 325,    
        x: 5,
        y: 5,       
        border: false,
        loadMask: true,  
        columnLines: true,
        scroll: false,        
        renderTo: Ext.getBody(),        
        viewConfig:{
            style: {  overflowX:'hidden',trackOver:'true',overflow: 'auto',stripeRows: 'true', 'background-color':'#f2f2e8', 'border-color': '#d2cfb0' }
        },
         features: [{
                ftype: 'summary'
            }],
        store: 'QHOS.store.driverviolation.summarystore',
        columns: [{
            header: 'Depot',    
            style: 'text-align:center',
            align: 'left',
            //width: 75,
            sortable: true,
            menuDisabled : true,            
            dataIndex: 'DEPOTNAME',
            flex: 1,
            draggable : false,
            tdCls: 'custom-column',
            },
        
        {
            header: 'DepotId',                
            //width: 75,
            sortable: true,
            menuDisabled : true,            
            hidden: true,
            hideable: false,
            dataIndex: 'DEPOTID',
            align: 'center',
            draggable : false,
            flex: 1            
        },
        .
        .
        }],
        selType: 'cellmodel'        
    }]
See the attached image for more information: circle data is hidden field data.

Need your help on this to hide hidden column filed data for IE 8 browser. (IE 8 + Document mode IE 8)

Thanks,
Asif
IE8 hidden column.jpg