如何使用 dataIndex Extjs 4 查找列索引答案

【问题标题】：how to find column index using dataIndex Extjs 4如何使用 dataIndex Extjs 4 查找列索引
【发布时间】：2012-12-06 11:31:35
【问题描述】：

在 ExtJS 3 中我使用了以下代码：

grid.getColumnModel().findColumnIndex("Tasks")

我尝试在 api 文档上找到它，但没有运气......那么我怎么可能通过列的 dataIndex 或该列的标题名称找到网格的列索引。

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

可以使用组件查询：

var fname = grid.down('[dataIndex=firstname]');

解决这个问题需要一段时间 - 文档中似乎没有示例。 ;-)

【讨论】：

我更喜欢这个答案，它使用选择器而不是接受的答案，它可能会迭代网格中的每一列。

【解决方案2】：

我猜你应该通过遍历 grid.columns 数组并比较每一列的 dataIndex 属性来找到索引。

例子：

var findColumnIndex = function(columns, dataIndex) {
    var index;
    for (index = 0; index < columns.length; ++index) {
        if (columns[index].dataIndex == dataIndex) { break; }
    }
    return index == columns.length ? -1 : index;
}


console.log(findColumnIndex(grid.columns, 'Task'));
console.log(findColumnIndex(grid.columns, 'Something'));

【讨论】：

使用grid.columnManager.columns 代替grid.columns。这样，如果列重新排序，您的函数将返回正确的索引。

【解决方案3】：

获取dataIndex 列的最标准方法是：

var column = grid.columnManager.getHeaderByDataIndex('Tasks')

请注意，这确实返回一列（与函数名称相反）。这是因为 ExtJS 中的网格表头实际上既是表头又是列内容。

Ext.grid.column.Column docs:

这个类指定一个列的定义分机网格。它既包含网格标题配置，也包含以及在网格本身内显示数据。

另请参阅：getHeaderByDataIndex docs。

【讨论】：

这是 Ext JS v6 中最“按文档”的方法。谢谢！

【解决方案4】：

function getColumnIndex(grid, dataIndex) {
    gridDataIndices = Ext.Array.pluck(grid.columns, 'dataIndex');

return Ext.Array.indexOf(gridDataIndices, desireDataIndex);
}

answered in sencha forums

【讨论】：

【解决方案5】：

 var gridColumns = grid.headerCt.getGridColumns();
 for (var i = 0; i < gridColumns.length; i++) {
   if (gridColumns[i].dataIndex == 'yourdataIndex') {
    alert(i);
   }  
 }

【讨论】：

【解决方案6】：

组件查询可能会有点慢，并且不能保证只有一个结果。仅遍历属于网格的列数组会更快一些。

这是一个使用 ext 框架的简单静态 util 函数。

 findColumnDataIndex: function(columns, dataIndex) {
   var column = null;
   Ext.Array.each(columns, function(c) {
     if (c.dataIndex === dataIndex) {
       column = c;
       return false;
     }
   }, this);
   return column;
 }

使用此代码从网格面板实例中获取列

var columns = grid.headerCt.items.items,

【讨论】：

【解决方案7】：

var RowEditor = new Ext.grid.plugin.RowEditing({...});
    RowEditor.editor.form.findField('Task');

【讨论】：

请解释您的答案，以便对未来的用户有用。