Search code examples
extjsextjs3

Highlight grid row on edit


I am on ExtJs3.2.
There is a gridpanel with a column having a textField as an editor.
On change of value in the textfield - i need the corresponding row to be highlighted.
How do I get the 'owning' row index of the text field?

 columns: [
      ...........
            {header: 'Revenues',dataIndex: 'percentage',
              editor: new Ext.form.TextField({
                     listeners: {
                        'change' : function (field, newValue, oldValue) {
                          if(oldValue!=newValue){
                         .......
                        //How do I get the row index?  
                         Ext.fly(grid.getView().getRow(row)).addClass('yellow-row');
                        }
                    }
            }

Is there any other way to achieve this?


Solution

  • Could you please try below?

    var grid = Ext.grid.GridPanel({
        store: yourStore,
        id: 'myGrid',
        colModel: new Ext.grid.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                {id: 'Company', header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
                {header: 'Change', dataIndex: 'change'},
                {
                    header: 'Revenue',
                    dataIndex: 'percentage',
                    editor: new Ext.form.TextField({
                        listeners: {
                            'change': function(field, newValue, oldValue) {
                                if (oldValue != newValue) {
                                    var sel = Ext.getCmp('myGrid').getSelectionModel().getSelected();
                                    // if you select more than one record use getSelections instead of getSelected
                                    console.log(sel);
                                }
                            }
                        }
                    })
                }
            ]
        }),
        sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
        width: 500,
        height: 300,
        frame: true,
        title: 'My Grid'
    });