如何更改 extjs 中特定列中的所有值？

Posted 2023-02-26

【中文标题】如何更改 extjs 中特定列中的所有值？

【英文标题】：How can I change all the values in a specific column in extjs?

【发布时间】：2013-07-26 20:50:37

【问题描述】：

我有一个带有列的可编辑网格面板，当我按下 applyToAll 按钮时，我想将列中的每个单独值更改为相同的值。似乎没有任何 api 调用使我能够获取列中的所有值，甚至是网格面板中的所有值。

//Model that defines my column named fileName
var colModel = new Ext.grid.ColumnModel([
    header:'File Name', 
    dataIndex:'fileName'
    
]);

// Editable grid panel:
var myGrid = new Ext.grid.EditorGridPanel(          
    store: store,
    colModel: colModel,
    clicksToEdit: 1,
    autoWidth: true,
    autoHeight: true
);

// Button that changes all the column names
var applyToAll = new Ext.Button(
  text: "Apply to All",
  handler: function()
    var record = myGrid.getSelectionModel().getSelected();

    //Change the values of the column here somehow.

  
);

//Form which holds everything
var gridForm = new Ext.FormPanel(
  id: 'mainForm',
  frame: true,
  items: [
    columnWidth: 0.6,
    layout: 'fit',
    items: [myGrid],
    buttons: [applyToAll]
 );

当我单击 applyToAll 按钮时，如何更改列中的所有值？

【参考方案1】：

要知道选择了哪个单元格，请使用 CellSelection 模型

var myGrid = new Ext.grid.EditorGridPanel(          
    // ...
    selModel: new Ext.grid.CellSelectionModel(),
    // ...
);

然后就可以调用store的每条记录，改变需要的值：

// Button that changes all the column names
var applyToAll = new Ext.Button(
    text: "Apply to All",
    handler: function()
        var record = myGrid.getSelectionModel().getSelected();
        var row = myGrid.getSelectionModel().getSelectedCell()[0];
        var col = myGrid.getSelectionModel().getSelectedCell()[1];
        var column_name = myGrid.getColumnModel().getColumnAt(col).dataIndex;


        myGrid.getStore().each(function(rec)
            rec.set(column_name, myGrid.getStore().getAt(row).get(column_name));
        );
    
);

【参考方案2】：

我最终做了什么：

var myGrid = new Ext.grid.EditorGridPanel(
  //...
  //I needed RowSelectionModel for another portion of my code
  selModel: new Ext.grid.RowSelectionModel()
  //...
);

var applyToAll = new Ext.Button(
  text: "Apply to All",
  handler: function()
    var record = myGrid.getSelectionModel().getSelected();
    myGrid.stopEditing();

    var gridStore = myGrid.getStore();
    var records = gridStore.getRange(0, gridStore.getTotalCount());

    for(var ii=0; ii<records.length; ii++)
      var curRecord = records[ii];
      curRecord.set('testCell', record.get('testCell'));
    

    gridStore.removeAll(true);
    gridStore.add(records);

    myGrid.startEditing(0, 0);
  
);