PDA

View Full Version : Making first column of a GridPanel unmovable



klausL
23 Jul 2009, 5:11 AM
I have a grid that has a lot of columns and I want users to be able to reorder them except for the first column. I managed to do this by setting enableColumnMove to 'true' and extending the Ext.grid.ColumnModel and using the new model in my grid.

This solution is not perfect as the user can still drag the first column as the code only prevents the actual reordering of the columns. Does anyone have any suggestions on how to get rid of the drag and drop animation when trying to drag the first column?

Here is the code that I used to extend the ColumnModel:

Ext.MyColumnModel = Ext.extend(Ext.grid.ColumnModel, {
moveColumn: function (oldIndex, newIndex) {
if (oldIndex == 0 || newIndex == 0) {
// Do nothing.
}
else {
var c = this.config[oldIndex];
this.config.splice(oldIndex, 1);
this.config.splice(newIndex, 0, c);
this.dataMap = null;
this.fireEvent("columnmoved", this, oldIndex, newIndex);
}
}
});

Condor
23 Jul 2009, 5:21 AM
I prefer this solution (http://www.extjs.com/forum/showthread.php?t=53666).

klausL
23 Jul 2009, 10:25 PM
Thanks for the advice Condor.

The solution prevents dragging the first column nicely, but it does not prevent users from dragging other columns into the place of the first column. I combined the solutions and modified my part of the code. Now if you try to drag some column to the first place it is moved to the second place instead.

So to solve the problem I needed to add the following code and set "dragable: false" in the config of the first column.

Ext.override(Ext.grid.HeaderDragZone, {
getDragData: function (e) {
var t = Ext.lib.Event.getTarget(e);
var h = this.view.findHeaderCell(t);
if (h && (this.grid.colModel.config[this.view.getCellIndex(h)].dragable !== false)) {
return {
ddel: h.firstChild,
header: h
};
}
return false;
}
});

Ext.MyColumnModel = Ext.extend(Ext.grid.ColumnModel, {
moveColumn: function (oldIndex, newIndex) {
if (newIndex == 0) {
newIndex = 1;
}
var c = this.config[oldIndex];
this.config.splice(oldIndex, 1);
this.config.splice(newIndex, 0, c);
this.dataMap = null;
this.fireEvent("columnmoved", this, oldIndex, newIndex);
}
});