在ExtJS 4.2中动态排序现有列

我有一个定义了模型的网格，但它应该只显示用户选择要查看的列，并按照用户选择的显示顺序显示

业务需求不是使用内置的列标题菜单对列进行排序/隐藏，也不是使用拖放功能对列进行排序，而是使用一个对话框，用户可以从“可用列”列表中选择“选定列”，也可以在其中设置列的显示顺序

我需要构建一个简单的方法，其中给定一个列dataindex数组，它应该只显示与数组匹配的列，并且以给定的顺序显示

为方便起见，这里有一个名为

setcolumnsreferences

的方法，该方法给定一个网格和一组数据索引，它应该：

仅显示与给定数据索引匹配的列

按给定顺序显示它们（与给定数组中的顺序相同）

---

看看网格重新配置方法

它将列列表作为参数，因此如果传递给setColumnPreferences的“columns”参数只是一个dataIndex，请找到一种方法将其转换为整个列。我已经使用for循环完成了这项工作。下面是一些让您开始学习的伪代码：

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);

},

在网格初始化（使用任何列顺序）后，可以使用网格标题容器方法随意移动列。该方法接受

fromIndex

和

toIndex

参数

比方说，您有一个列数据索引数组作为配置：

/**
 * 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();
},

/**
*给定一个网格对象和一个包含数据索引的数组
*在要显示的列中，此函数应
*使网格仅显示给定的列，并在
*按列阵列上显示的顺序排列
*@param{Ext.grid.Panel}grid
*@param{String[]}列配置
*/
SetColumnsReferences:函数（网格、列配置）{
var gridView=grid.getView（）；
var headerContainer=gridView.getHeaderCt（）；
var columns=headerContainer.getGridColumns（）；
var columnsByDataIndex={}；
对于（var i=0；i

我收到你的建议了。唯一的问题是，除了dataIndex之外，我还有很多额外的配置和自定义呈现器，我不想一次又一次地创建它们。

/**
 * 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();
},