gap between grid border and header/body

[debtman7]

Hi,

This is a bit of a long shot, but I'm setting a gap of a few pixels between the border on a grid (or, between the edge of the grid and the browser edge for a full width grid with no border). I have absolutely no idea what's causing it except that in the grid's html sets them as different sizes.

For example, if div.x-grid3 and div.x-grid3-header-inner have the inline style set to width: 1175px, then the table element for the header will have the width set to 1172px.

I've looked through the grid view code and it appears that the table width is set to the total width of the columns, whereas the header and grid width are set to the actual html element width.

But I'm at a bit of loss as to how to correct this. I notice the same thing in the ext demos, however since I'm giving a darker background to the grids and setting the height on render to avoid showing scrollbars, it's much more obvious in my usage.

Anyone have any clues?

[debtman7]

Ok if anyone else runs into this, I did fix it. Fix submitted in the bug reports column. If anyone else runs into this, here's briefly the fix.

The bug seems to be triggered by force fitting columns, which calculates column widths by dividing the total grid width by the number of columns and making some adjustments. Unfortunately this calculation results in fractional numbers quite often, leading ext to round and discard those fractions of pixels, which causes the total width of columns to be less than that of the entire grid, giving you a gap.

Here's a custom grid subclass that fixes this. I subclasses grid panel to call the grid view subclass, so I don't have to go around and manually create a grid view everywhere. If you want you can just use the grid view subclass and assign it to all of your grids.

Ext.ux = {};

Ext.ux.FullGridPanel = Ext.extend(Ext.grid.GridPanel, {

	getView : function() {
        if(!this.view) {
            this.view = new Ext.ux.FullGridView(this.viewConfig);
        }
        return this.view;
    }

});

Ext.ux.FullGridView = Ext.extend(Ext.grid.GridView, {

	/* this probably doesn't need to redo the whole method, however I'm being lazy */
	// private
    fitColumns : function(preventRefresh, onlyExpand, omitColumn){
        var cm = this.cm, leftOver, dist, i;
        var tw = cm.getTotalWidth(false);
        var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset;

        if(aw < 20){ // not initialized, so don't screw up the default widths
            return;
        }
        var extra = aw - tw;

        if(extra === 0){
            return false;
        }

        var vc = cm.getColumnCount(true);
        var ac = vc-(typeof omitColumn == 'number' ? 1 : 0);
        if(ac === 0){
            ac = 1;
            omitColumn = undefined;
        }
        var colCount = cm.getColumnCount();
        var cols = [];
        var extraCol = 0;
        var width = 0;
        var w;
        for (i = 0; i < colCount; i++){
            if(!cm.isHidden(i) && !cm.isFixed(i) && i !== omitColumn){
                w = cm.getColumnWidth(i);
                cols.push(i);
                extraCol = i;
                cols.push(w);
                width += w;
            }
        }
        var frac = (aw - cm.getTotalWidth())/width;
        while (cols.length){
            w = cols.pop();
            i = cols.pop();
            cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true);
        }

		/* changed line: in ext this only adjusts if the column widths are larger than the total grid, let's do it if it's less than the total width too in order to avoid the gap */
	        if((tw = cm.getTotalWidth(false)) != aw){
            	     var adjustCol = ac != vc ? omitColumn : extraCol;
             	     cm.setColumnWidth(adjustCol, Math.max(1,
                     	     cm.getColumnWidth(adjustCol)- (tw-aw)), true);
		}

        if(preventRefresh !== true){
            this.updateAllColumnWidths();
        }


        return true;
    }
});