Unable to read edited data in extjs Grid

Question

I am new in ext js and wanted to do some POC for Grid. I need to read the data from oracle database and click on editor updater and then get that updated that and then pass it to a servlet for editing.

I did till rendering data from Database but now unable to prodeed as not getting how to get updated data and pass it to servlet.

Please find my code for Grid -

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

// Define Person entity
// Null out built in convert functions for performance *because the raw data 


  Ext.onReady(function() {


Ext.QuickTips.init();

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


    Ext.define('person', {
                extend: 'Ext.data.Model',
                fields: [


                    {name: 'sso', type: 'string'},
                    {name: 'fname', type: 'string'},

                    {name: 'lname', type: 'string'},
                    {name: 'msso', type: 'string'},
                    {name: 'email_address', type: 'string'},
                    {name: 'person_status', type: 'string'}                     
                ]
            });

 var ds = new Ext.data.Store({
            model:'person',
              autoLoad: true, 
            //url:'/FormAction',
             actionMethods: {create: "POST", read: "POST", update:          "POST", destroy: "POST"},
         proxy: {  
             type: 'ajax',      
             url: '/identityiq/FormAction',       
             reader: {      
                 type: 'xml',
                 record: 'record'
              },
           }                

            });

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            });

   // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: ds,
    columns: [
        {
            text     : 'SSO',
            width:80,
            sortable : true,
            dataIndex: 'sso'
        },
        {
                    id: 'fname',
                    header: 'First Name',
                    dataIndex: 'fname',
                    width:80,
                    flex: 1,
                    field: {
                        allowBlank: false
                    }
        },
        {

            id: 'lname',
            header     : 'Last Name',
            width:80,               
            sortable : true,
            dataIndex: 'lname',
            field: {
                        allowBlank: false
                    }
        },
        {
            text     : 'Manager SSO',
            width    : 80,
            sortable : true,               
            dataIndex: 'msso'
        },
        {
            text     : 'Email Address',
            width    : 80,
            sortable : true,               
            dataIndex: 'email_address'
        },
        {
            text     : 'Personstatus',
            width    : 35,
            sortable : true,               
            dataIndex: 'person_status'
        }
    ],
    selModel: {
        selType: 'cellmodel'
    },
    height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'myDiv',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },
    frame: true,
    tbar: [
 {
     text: 'Save',


     handler: function ()
     {
        // myGrid is a reference to your Ext.grid.Panel instance
        if (grid.editingPlugin.editing) {


            var value = grid.editingPlugin.getActiveEditor().field.value;

            alert('Value: ' + value);
        }
     }
 }
 ],
    plugins: [cellEditing]
});
});

-- in this code i am getting error that TypeError: grid.editingPlugin.getActiveEditor(...) is null

Request you to please answer this as i am stuck and need to present this POC.

Thanks, Ashwini

As per the answer below following code is working fine if i replace the save Handler -

    handler: function ()
     {
        alert(ds.getModifiedRecords());
        console.log(ds.getModifiedRecords());

        var modified_data ={};
        modified_data = ds.getModifiedRecords();

        for (var i = 0; i < modified_data.length; i++) {
    var record =          modified_data[i];                 
                alert(record.data.fname);
        }
     }

Answer 1

I guess that problem with your Save button handler is that you are trying to get active editor for a cell, but cell editor is automatically removed once it loses focus so grid.editingPlugin.getActiveEditor() return null.

Good thing is that you don't have to do this, Ext.grid.plugin.CellEditing automatically updates appropriate store record for you, so all you have to do to get all modifications inside your Save button handler is this:

// Simply use your store method for fetching modified records
console.log(ds.getModifiedRecords());

If you need to do something after cell is edited, then you should check out Ext.grid.plugin.CellEditing edit event.

Answer 2

Try using grid's SelectionModel to get the data, something like

var valueList = grid.getSelectionModel().getSelection(); //Returns an array of the currently selected records.
var value =  valueList[0].data.fname; //Should get First Name