PDA

View Full Version : header offset issue in EditorGridPanel



leoranks
19 Nov 2010, 12:05 AM
Hello!

I'm using EditorGridPanel in conjunction with LockingGridView and PagingToolbar (from ExtJS 3.2) and I'm encountering a weird issue (circled in red in screenshot below, headerGlitch2.png). For some reason, there is an "offset" of 10px on each side of the unlocked portion of the grid header. This offset causes the header and corresponding columns to be out of alignment.

The "locked" (leftmost) column is just fine. The issue is with the remaining unlocked column headers to the right. There shouldn't be that extra 10px there.

I noticed the following in the Firebug console (illustrated in headerGlitch3.png below):

<div class="x-grid3-header-offset" style="width: 400px;">
<table cellspacing="0" cellpadding="0" border="0" style="width: 380px; height: 23px;">
...
</table>
</div>

Why would the width be 400px here? Is there some other CSS padding of 10px being added somewhere possibly?

The width of that <div> should be 380px, like its child <table> element, since there are 4 columns of 95px each.
I've searched through the forums and googled this for hours, to no avail. Please help!

Many thanks!

headerGlitch2.png
23419

headerGlitch3.png
23420

headerGlitch4.png
23421

leoranks
19 Nov 2010, 12:13 AM
Let me also add that this issue occurs in Chrome 7, FF 3.5+, as well as IE8. I've read that the "x-grid3-header-offset" class can have width set to "auto" as one possible fix. This glitch occurs no matter how many columns there are in the grid (horizontal scrollbar or not).

Many thanks.

leoranks
19 Nov 2010, 8:42 AM
Sorry for not posting this earlier... here's the code.




var colModel = new Ext.ux.grid.LockingColumnModel({
id: 'colModel',
columns: dyn_columns,
getCellEditor: function(colIndex, rowIndex) {}
});

var dataStore = new Ext.ux.data.PagingStore({
autoDestroy: true,
reader: new Ext.data.XmlReader({
record: 'row',
id: 'page',
fields: dyn_fields,
totalRecords: 'results'
}),
lastOptions: {params: {start: 0, limit: myPageSize}}
});

var gridView = new Ext.ux.grid.LockingGridView({
id: 'gridView'
});

var grid = new Ext.grid.EditorGridPanel({
id: 'grid' + gridCount,
store: dataStore,
cm: colModel,
view: gridView,
stripeRows: true,
clicksToEdit: 1,
renderTo: 'application',
width: 'auto',
bbar: new Ext.ux.PagingToolbar({
store: dataStore,
displayInfo: true,
pageSize: myPageSize
})
});

dataStore.loadData(xml);

darthwes
19 Nov 2010, 9:41 AM
we need to see dyn_columns

leoranks
19 Nov 2010, 11:44 AM
Here's some more code. Hopefully it clarifies things...




// create array of objects for grid column model
function objColumn(id, header, width, dataIndex, editor, locked) {
this.id = id;
this.header = header;
this.width = width;
this.dataIndex = dataIndex;
this.editor = editor;
this.locked = locked;
}

// create array of objects for grid field mapping data
function objField(name, mapping) {
this.name = name;
this.mapping = 'cell[id=' + mapping + ']';
}

// set up arrays for column models & mapping fields; render grid
function setUpColumns() {

// temp textfield editor for DATA part of grid
var tf = new Ext.form.TextField({ disabled: true, editable: false });

// set up mapping & column info for grid and then render it
dyn_columns = new Array();
dyn_fields = new Array();
for (var i=0; i<columnData.length; i++) {
var temp = i;
temp = temp + '';
if (i==0) { // "URL" column
dyn_columns[i] = new objColumn(temp, columnData[i].header, 95, temp, tf, true);
} else { // all other regular columns
dyn_columns[i] = new objColumn(temp, columnData[i].header, 95, temp, tf, false);
}
dyn_fields[i] = new objField(temp, columnData[i].slotID);
}

renderGrid();
}

leoranks
19 Nov 2010, 12:07 PM
One more note that may or may not be useful: I'm using the standard ext-all.css and LockingGridView.css stylesheets; to the best of my knowledge, none of the grid styles have been modified or overridden.

Thanks again for any help on this...

darthwes
19 Nov 2010, 3:04 PM
Ext.ux.data.PagingStore is for Ext 2x's.

leoranks
19 Nov 2010, 3:54 PM
Hmmm... according to Condor, PagingStore is supported for Ext 3.0+. Check out the thread below:

http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5

I appreciate the suggestion, but it seems that the source of the data is probably not causing the spacing issue, but you never know. I tried removing paging altogether a few days ago and the glitch was still there.

:(:(:(