onlinesaratoga
29 Oct 2007, 6:12 PM
I have a number of grids in my application (paginating grids). For almost all of them in both Firefox and IE, the drag handles (for column resizing) do not line up with the actual grid headers. They are wider.
On the attachment, I have a screenshot which shows the problem. The red lines above the header show where the drag handles indicate the columns are, however you will note that the columns below are not actually in those locations. (As one example, you will see a drag handle through the capital "S" in "Last Sent" and the "R" in "Last Read" and the "e" in "Created".)
Here is the code that makes this grid (although it is happening on all of the grids in my app):
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'store/supportDesk.store.php'
}),
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'posts',
totalProperty: 'numPosts',
id: 'postID'
}, [
{name: 'postID', mapping: 'postID'},
{name: 'datePosted', mapping: 'datePosted'},
{name: 'lastUserPost', mapping: 'lastUserPost'},
{name: 'title', mapping: 'title'},
{name: 'name', mapping: 'name'},
{name: 'answered', mapping: 'answered'}
]),
// turn on remote sorting
remoteSort: true
});
ds.on('load',disableButtons);
function showAnswered(v) {
return v > 0 ? "<img border=\"0\" align=\"center\" src=\"images/green_checkmark.gif\">" : "";
}
colModel = new Ext.grid.ColumnModel([
{header: "Date",width:100, sortable: true, locked:false, dataIndex: 'datePosted',renderer: Ext.util.Format.dateRenderer('M d, Y')},
{header: "Topic",width:375, sortable: true, dataIndex: 'title'},
{header: "Posted By", width: 150, sortable: true, dataIndex: 'name'},
{header: "Answered", width: 65, sortable: true, dataIndex: 'answered',renderer:showAnswered,type: 'int',align: 'center'}
]);
supportDeskGrid = new Ext.grid.Grid('supportDeskGrid', {
ds: ds,
cm: colModel,
loadMask: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
autoExpandColumn: false,
autoSizeColumns: false
});
supportDeskGrid.selModel.on('rowselect',activateButtons);
supportDeskGrid.selModel.on('rowdeselect',disableButtons);
supportDeskGrid.on("rowdblclick", function(g, row, e) { viewPost(); });
supportDeskGrid.render();
On the attachment, I have a screenshot which shows the problem. The red lines above the header show where the drag handles indicate the columns are, however you will note that the columns below are not actually in those locations. (As one example, you will see a drag handle through the capital "S" in "Last Sent" and the "R" in "Last Read" and the "e" in "Created".)
Here is the code that makes this grid (although it is happening on all of the grids in my app):
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'store/supportDesk.store.php'
}),
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'posts',
totalProperty: 'numPosts',
id: 'postID'
}, [
{name: 'postID', mapping: 'postID'},
{name: 'datePosted', mapping: 'datePosted'},
{name: 'lastUserPost', mapping: 'lastUserPost'},
{name: 'title', mapping: 'title'},
{name: 'name', mapping: 'name'},
{name: 'answered', mapping: 'answered'}
]),
// turn on remote sorting
remoteSort: true
});
ds.on('load',disableButtons);
function showAnswered(v) {
return v > 0 ? "<img border=\"0\" align=\"center\" src=\"images/green_checkmark.gif\">" : "";
}
colModel = new Ext.grid.ColumnModel([
{header: "Date",width:100, sortable: true, locked:false, dataIndex: 'datePosted',renderer: Ext.util.Format.dateRenderer('M d, Y')},
{header: "Topic",width:375, sortable: true, dataIndex: 'title'},
{header: "Posted By", width: 150, sortable: true, dataIndex: 'name'},
{header: "Answered", width: 65, sortable: true, dataIndex: 'answered',renderer:showAnswered,type: 'int',align: 'center'}
]);
supportDeskGrid = new Ext.grid.Grid('supportDeskGrid', {
ds: ds,
cm: colModel,
loadMask: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
autoExpandColumn: false,
autoSizeColumns: false
});
supportDeskGrid.selModel.on('rowselect',activateButtons);
supportDeskGrid.selModel.on('rowdeselect',disableButtons);
supportDeskGrid.on("rowdblclick", function(g, row, e) { viewPost(); });
supportDeskGrid.render();