Question

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

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

我需要构建一个简单的方法，在给定数组dataIndexes的情况下，它应该显示仅与数组匹配的列，并且给定顺序。< / p>

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

仅显示与给定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);
},

Answer 1

看看网格重新配置方法。

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

它将列列表作为参数，因此如果＆＃39;列＆＃39;传递给setColumnPreferences的参数只是一个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);

},

Answer 2

在网格化后（使用任何列顺序）后，您可以使用网格标题容器move()方法随意移动列。该方法接受$('.my-slider')[0].slick.refresh()和fromIndex参数。

我们假设您有一组列dataIndexes作为您的配置：

toIndex

动态排序ExtJS 4.2中的现有列

2 个答案: