在 ExtJS 4.2 中动态排序现有列答案

【问题标题】：Dynamically ordering existing columns in ExtJS 4.2在 ExtJS 4.2 中动态排序现有列
【发布时间】：2015-04-02 21:57:33
【问题描述】：

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

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

我需要构建一个简单的方法，在给定列 dataIndexes 的数组中，它应该仅显示与数组匹配的列，并按给定顺序。

为方便起见，这里有一个fiddle，其中有一个名为setColumnsPreferences 的方法，它给定一个网格和一个dataIndexes 数组，它应该：

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

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

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

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

看看网格重配置方法。

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

它将列列表作为参数，因此如果传递给 setColumnPreferences 的“columns”参数只是一个数据索引，请找到一种方法将其变成一整列。我已经使用 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);

},

【讨论】：

我明白你的建议。唯一的问题是，除了 dataIndex 之外，我还有很多额外的配置和自定义渲染器，我不想一遍又一遍地创建。

【解决方案2】：

网格初始化后（使用任何列顺序），您可以使用网格标题容器move() 方法随意移动列。该方法接受fromIndex 和toIndex 参数。

假设您有一个列 dataIndexes 数组作为您的配置：

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

【讨论】：