CODEWITHSUNDEEP
extjsextjs4.2
jacoviza
jacoviza

Reputation: 1008

Dynamically ordering existing columns in ExtJS 4.2

I have a grid with a defined model, but it should only display the columns that the user chooses to see, and in the order he chooses them to be displayed.

The business requirements are not to use the built-in column header menu to sort/hide columns, neither the drag and drop functionality to order columns, but to use a dialog where the user can pick the "selected columns" from an "available columns" list, where he can also set the columns display order.

I need to build a simple method where given an array of columns dataIndexes, it should display only the columns that match the array, and in the given order.

Here is a fiddle for your convenience, where there is a method called setColumnsPreferences that given a grid and an array of dataIndexes, it should:

  1. Show only the columns that match the given dataIndexes.

  2. Display them in the given order (same order as in the given array)

    /**
 * Given a grid object and an array containing the data indexes 
 * of the columns that we want to display, this function should
 * make the grid to display only the given columns, and in the
 * order as they appear on the columns array
 * @param {Ext.grid.Panel} grid The grid we want to modify
 * @param {Array} columns A string array
 */
setColumnsPreferences : function(grid, columns) {
    alert("not yet implemented, columns: " + columns);
},

Upvotes: 0

Views: 2172

Answers (2)

MarthyM
MarthyM

Reputation: 1849

After grid inicialization (with any column order), you can move the columns around as you like using the grid header container move() method. The method accepts fromIndex and toIndex parameters.

Let's say, you have an array of column dataIndexes as your configuration:

/**
 * Given a grid object and an array containing the data indexes 
 * of the columns that we want to display, this function should
 * make the grid to display only the given columns, and in the
 * order as they appear on the columns array
 * @param {Ext.grid.Panel} grid
 * @param {String[]} columnsConfiguration
 */
setColumnsPreferences: function(grid, columnsConfiguration) {
    var gridView = grid.getView();
    var headerContainer = gridView.getHeaderCt();
    var columns = headerContainer.getGridColumns();

    var columnsByDataIndex = {};
    for (var i = 0; i < columns.length; i++)
    {
        // save columns by data index for easier access later on
        var column = columns[i];
        var dataIndex = column.dataIndex;
        columnsByDataIndex[dataIndex] = column;
    }

    for (var newIndex = 0; newIndex < columnsConfiguration.length; newIndex++)
    {
        // Note that you have to start from the lowest new index
        // If you don't, your columns will not be ordered propertly
        var dataIndex = columnsConfiguration[newIndex];
        // get column from prepared object
        var column = columnsByDataIndex[dataIndex];
        var oldIndex = column.getIndex();
        // move column from old index to new index
        headerContainer.move(oldIndex, newIndex);
    }

    // refresh grid view at the end to apply changes
    gridView.refresh();
},

Upvotes: 0

Michael Watson
Michael Watson

Reputation: 318

Take a look at the grid reconfigure method.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-method-reconfigure

It takes a list of columns as an argument, so if the 'columns' argument passed to setColumnPreferences is just a dataIndex, find a way to turn that into a whole column. I've done so using a for loop. Here's a little bit of pseudo code to get you started:

setColumnsPreferences : function(grid, columns) {
  var columnArray = [];
  for (column : columns) {
    if (column == 'dataIndex1') {
      columnArray.add({
        dataIndex: column,
        width: 100,
        text: 'Column 1'
      }
    } else if (column == 'dataIndex2') {
      columnArray.add({
        dataIndex: column,
        width: 100,
        text: 'Column 2'
      }
    }
  }

 // When the column array is built
 grid.reconfigure([],columnArray);

},

Upvotes: 0

Related Questions