GridPanel with forceFit sizes columns incorrectly

[oboyklubben]

Hi,

I have 3 GridPanels which all use the same base class, which looks like this:

	initComponent: function() {
		var sm = new Ext.grid.CheckboxSelectionModel();
		Ext.apply(this, {
			columns: [
				sm,
				{ dataIndex: 'id', fixed: true, hidden: true, id: 'id' },
				{ dataIndex: 'type', fixed: true, header: '*', groupRenderer: Hogia.pbm.Renderers.gridGroupType, renderer: Hogia.pbm.Renderers.gridColumnType, width: 25 },
				{ dataIndex: 'coworker', header: Hogia.pbm.resources.Coworker, sortable: true, width: .15 },
				{ dataIndex: 'project', header: Hogia.pbm.resources.Project, sortable: true, width: .15 },
				{ dataIndex: 'subproject', groupable: false, header: Hogia.pbm.resources.Subproject, sortable: true, width: .15 },
				{ dataIndex: 'customer', header: Hogia.pbm.resources.Customer, sortable: true, width: .15 },
				{ dataIndex: 'event', header: Hogia.pbm.resources.Activity, sortable: true, width: .15 },
				{ dataIndex: 'transactionDate', groupRenderer: Hogia.pbm.Renderers.gridGroupTransactionDate, header: Hogia.pbm.resources.Day, renderer: Ext.util.Format.dateRenderer(Date.patterns.ShortDate), sortable: true, width: .1 },
				{ dataIndex: 'unitPrice', groupable: false, header: Hogia.pbm.resources.Amount, renderer: Hogia.pbm.Renderers.gridColumnUnitPrice, sortable: true, width: .1 }
			],
			sm: sm,
			store: new Hogia.pbm.authorization.Store({ listeners: { beforeload: { fn: this.beforeStoreLoad, scope: this } } }),
			view: new Ext.grid.GroupingView({
				deferEmptyText: false,
				emptyGroupText: '- ' + Hogia.pbm.resources.Deviations,
				emptyText: this.emptyText,
				forceFit: true,
				hideGroupedColumn: false,
				showGroupName: false
			})
		});
		
		Hogia.pbm.authorization.RegistrationGrid.superclass.initComponent.apply(this, arguments);
	},

For some reason the first loaded grid (Ready for authorization) will not size its columns correctly, the last column (Amount) gets squeezed in. However the other grids (Already authorized and Exported) renders perfectly.

I've tried everything possible, calling fitColumns, doLayout, view.refresh etc. but it still renders the last column incorrectly.

[Condor]

Could this be caused by this bug (possible fix included)?

[oboyklubben]

Worked like a charm. I did try to re-render the grid in the afterRender() method but it obviously went wrong somewhere

Thanks a bunch Connor for fast reply, and for the record - here is the (very simple) fix:

Ext.override(Ext.grid.GridView, {
	render: function() {
		if (this.autoFill) {
			this.fitColumns(true, true);
		}
		this.renderUI();
	}
});

Is this a confirmed bug btw?

[oboyklubben]

I found another display bug related to this issue - if I try to change the grouping column in one of the other grids (not the one displayed first) it sizes the columns weird.

You can see the live grid at http://pbm.tellurian.se. Changing the grouping column for the first grid (Ready for authorization) works but not the other ones (Already authorized, etc). Source code for the grids can be found at http://pbm.tellurian.se/javascripts/authorization.js.

UPDATE: It works in IE but not in Safari, FF and Chrome. And to clarify, it's the initially grouped column (Day) that gets very wide when grouping on another column. Grouping back on the Day column restores the grid and it looks good again.