I have this example code from Sencha's website

Ext.onReady(function() 
{   
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
            {"name":"Bart", "email":"[email protected]", "phone":"555-222-1234"},
            {"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
            {"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'cellmodel',
        plugins: 
        [{ 
            ptype: 'cellediting',
            clicksToEdit: 1
        }],
        height: 200,
        width: 400,
        renderTo: 'grid'
    });

});

This ptype: 'cellediting' plugin allows for inline cell editing by just clicking on textfield. I just cannot find any posts on how and where the changed value gets saved? How can I add a listener to a cell so that after each change I will be able to alert() the new value?

Thanks for any tips...

I have this example code from Sencha's website

Ext.onReady(function() 
{   
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
            {"name":"Bart", "email":"[email protected]", "phone":"555-222-1234"},
            {"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
            {"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'cellmodel',
        plugins: 
        [{ 
            ptype: 'cellediting',
            clicksToEdit: 1
        }],
        height: 200,
        width: 400,
        renderTo: 'grid'
    });

});

This ptype: 'cellediting' plugin allows for inline cell editing by just clicking on textfield. I just cannot find any posts on how and where the changed value gets saved? How can I add a listener to a cell so that after each change I will be able to alert() the new value?

Thanks for any tips...

• javascript
• extjs
• grid
• store

1 Answer 1

The record values are updated each time the editor is blurred (i.e. lose focus). Ext keeps track of fields in the records that have been modified, until you mit the changes (by syncing the store, for example).

To be notified that a field has been edited, use the edit event of the plugin. As you can see in the doc, you can install a listener for this event directly in the grid (no need to add the listener specifically to the plugin).

Edit

With your code, that would be something like this:

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: 
    [{ 
        ptype: 'cellediting',
        clicksToEdit: 1
    }],
    height: 200,
    width: 400,
    renderTo: 'grid',

    listeners: {
        edit: function(editor, e) {
            var record = e.record;

            alert(Ext.String.format(
                'The field "{0}" or record #{1} has been changed from {2} to {3}', 
                e.field, record.get('id'), e.originalValue, e.newValue
            ));

            alert('The following fields of the records are dirty: ' + Ext.Object.getKeys(record.modified).join(', '));
        }
    }
});