سؤال

I have an editable grid panel with a column and I would like to change each individual value in the column to the same value when I press the applyToAll button. There doesn't seem to be any api call that enables me to get all of the values in the column or even all the values in the grid panel.

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

How can I change all the values in the column when I click the applyToAll button?

هل كانت مفيدة؟

المحلول

To know which cell is selected, please use the CellSelection model

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

Then you can call each record of the store and change the needed value:

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

نصائح أخرى

What I ended up doing:

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);
  }
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top