1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    6
    Vote Rating
    0
    oboyklubben is on a distinguished road

      0  

    Question GridPanel with forceFit sizes columns incorrectly

    GridPanel with forceFit sizes columns incorrectly


    Hi,

    I have 3 GridPanels which all use the same base class, which looks like this:
    Code:
    	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.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    6
    Vote Rating
    0
    oboyklubben is on a distinguished road

      0  

    Default


    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:
    Code:
    Ext.override(Ext.grid.GridView, {
    	render: function() {
    		if (this.autoFill) {
    			this.fitColumns(true, true);
    		}
    		this.renderUI();
    	}
    });
    Is this a confirmed bug btw?

  4. #4
    Sencha User
    Join Date
    May 2008
    Posts
    6
    Vote Rating
    0
    oboyklubben is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1