View Full Version : [2.2.1] last column width too small in IE

18 Mar 2009, 6:09 AM
I have a gridPanel, using simple gridView with forceFit: true option, a column model where I specify widths for columns. I know that forceFit ignores (somehow) the widths specified in columnModel, but actually they are direct proportional with those widths (what I want).

In FF and Chrome everything is ok, in IE7 last column is shrinked at almost 10-15 pixels (attachments bellow).

I've tried also the overrides from Condor's post (http://extjs.com/forum/showthread.php?p=223014#post223014), but those two are messing something else (errors, in 2.2.1).

My code for the grid:

var ticketsStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'modules/server/users/ticketsProxy.php'
,reader: new Ext.data.JsonReader({
root: 'tickets'
,totalProperty: 'totalCount'
,id: 'ticket_id'
{name: 'ticket_id'}
,{name: 'ticket_date', type:'date', dateFormat:'Y-m-d H:i:s'}
,{name: 'ticket_subject'}
,{name: 'status'}
,{name: 'status_color'}
,{name: 'priority'}
,{name: 'priority_color'}
,{name: 'assigned_to_user'}
,baseParams: {
type: 'mytickets'
,remoteSort: true
,sortInfo: {
field: 'ticket_date'
,direction: 'DESC'

var ticketsSelectionModel = new Ext.grid.CheckboxSelectionModel();
var ticketsColumnModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({})
,{header: 'TicketID', dataIndex: 'ticket_id', align: 'right', sortable: true, width: 60}
,{header: lang['tickets_grid_column_header_date'], dataIndex: 'ticket_date', sortable: true, align: 'left', width: 90, renderer: Ext.util.Format.dateRenderer('d.m.Y H:i')}
,{header: lang['tickets_grid_column_header_subject'], dataIndex: 'ticket_subject', sortable: true, align: 'left', width: 250}
,{header: lang['tickets_grid_column_header_status'], dataIndex: 'status', sortable: true, align: 'left', width: 70, renderer: function(val,meta,rec,rowIdx,colIdx,store) {return val ? '<font style="color:'+rec.get('status_color')+';">'+val+'</font>' : '';}}
,{header: lang['tickets_grid_column_header_priority'], dataIndex: 'priority', sortable: true, align: 'left', width: 70, renderer: function(val,meta,rec,rowIdx,colIdx,store) {return val ? '<font style="color:'+rec.get('priority_color')+';">'+val+'</font>' : '';}}
,{header: lang['tickets_grid_column_header_assigned_to'], dataIndex: 'assigned_to_user', sortable: true, align: 'left', width: 150}

var ticketsGrid = function(gridConfig){
var myGrid = new Ext.grid.GridPanel(
store: ticketsStore
,cm: ticketsColumnModel
,sm: ticketsSelectionModel
,autoScroll: true
,border: false
,stateful: true
//,plugins: tasksFilters
,viewConfig: {
//autoFill: true
//,deferEmptyText: true
forceFit: true
,gridConfig || {})
return myGrid;


var myTabPanel = new Ext.TabPanel({
region: 'center'
,resizeTabs: true
,border: false
,layoutOnTabChange: true
,minTabWidth: 115
,tabWidth: 150
,enableTabScroll: true
,deferredRender: false
,activeTab: 0
,defaults: {
autoScroll: true
,items: {
title: lang['mytickets_label']
,tabTip: '<b>'+lang['mytickets_label']+'</b><br />'+lang['mytickets_tooltip']
,layout: 'fit'
,closable: false
,items: new ticketsGrid()
,tbar: ticketsTBar
,bbar: new ticketsBBar()

My applied overrides:

Ext.override(Ext.grid.GridView, {
layout: function(){
return; }
var g = this.grid;
var c = g.getGridEl();
var csize = c.getSize(true);
var vw = csize.width;
if(vw < 20 || csize.height < 20){
this.scroller.dom.style.overflow = 'visible';
this.scroller.dom.style.position = 'static';
this.el.setSize(csize.width, csize.height);
var hdHeight = this.mainHd.getHeight();
var vh = csize.height - (hdHeight);
this.scroller.setSize(vw, vh);
this.innerHd.style.width = (vw)+'px';
if(this.lastViewWidth != vw){
this.fitColumns(false, false);
this.lastViewWidth = vw;
}else {
this.onLayout(vw, vh);
getColumnWidth: function(col){
var w = this.cm.getColumnWidth(col);
if(typeof w == 'number'){
return (Ext.isBorderBox || Ext.isSafari3 ? w : (w-this.borderWidth > 0 ? w-this.borderWidth:0)) + 'px';
return w;
// render: function(){
// if(this.autoFill){
// this.fitColumns(true, true);
// }else if(this.forceFit){
// this.fitColumns(true, false);
// }else if(this.grid.autoExpandColumn){
// this.autoExpand(true);
// }
// this.renderUI();
// }

Ext.override(Ext.grid.CheckboxSelectionModel, {
renderer : function(v, p, record){
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-checker"> </div>';

With or without ToolBar for GridPanel, is the same result in IE7.

Do you know a fix for this ?

Thanks !

18 Mar 2009, 6:15 AM
What's the purpose behind this?
If you are trying to stretch a grid to take all available space, then you might use autoExpandColumn property (instead of forceFit). Auto expand will also alow user to stretch columns if they want.
Maybe auto expand will behave more nicely across different browsers.

19 Mar 2009, 4:07 AM
Yes, indeed autoExpandColumn seems to work nicer cross-browser. Interesting is the fact that in the examples, grid3.js, works good with forceFit, but maybe there's something else which causes this (one example could be local dummyData instead of server-proxy file).

I'm glad that this one still works, thanks.

23 Mar 2009, 5:42 AM
But still, there is a problem, now with autoExpandColumn.

If you have at least one hidden column until the one you want to autoExpand, this option does not work anymore.

I'm not happy :)

23 Mar 2009, 5:45 AM
Solved this, by using custom ID on the columnModel & autoExpandColumn :)