View Full Version : How to customize an editable grid? Problems with ColumnModel.setConfig()

21 May 2010, 6:41 AM
Hi, is there a best practice to customize a grid programmatically?
I would like to set the following options in an existing edit grid:

order of columns
which columns to hide/display
column width
[sort direction]
My approach was to loop through the configured columns of the columnModel and create a new configuration array by copying+modifying the original columns. Then I set the new configuration via

grid.colModel.setConfig(newColumnConfig, false);

Unfortunately after the call the editor option of the column is set to null which results in a non-editable grid. Before the call the columns in the configuration have a valid editor set. So it seems ExtJs sets the editors of the columns to null. But why? How can I customize it and still have it editable?

Thanks in advance.

Here is my test code:

function customizeGrid(grid) {

var columnData = [ { id: "price", width: 100, sort: 'ASC' },
{ id: "availDate", width: 200, sort: 'ASC' },
{ id: "light", width: 50, sort: 'DES' } ];

var newColumnConfig = new Array();
var index = 0;

// copy requested columns

for (var i = 0; i < columnData.length; i++) {

var column = grid.colModel.getColumnById(columnData[i].id);
if (column) {
// copy column to new configuration

newColumnConfig[index] = column;
// update

newColumnConfig[index].hidden = false;

newColumnConfig[index].width = columnData[i].width;


// set flag to indicate column is already copied

column.copied = true;

// copy remaining columns (hidden)

for (var i = 0; i < grid.colModel.config.length; i++) {

var column = grid.colModel.config[i];
if (!column.copied) {

newColumnConfig[index] = column;
newColumnConfig[index].hidden = true;

grid.colModel.setConfig(newColumnConfig, false);