Updating database with Ext Store Writer - ExtJS 4.2

Question

I had modified the sencha's writers example, but i couldn't make to update my data in my database. I have a php script that do that at server's side, but I can not see the update call by extjs. I am using a reader to get data, and it works fine, but when I try to update the data sending to my server, I never get the call.

Here is my code:

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

Ext.onReady(function(){
    // Define our data model
    Ext.define('Empresa', {
        extend: 'Ext.data.Model',
        fields: [
            {
                name: 'Id',
                type: 'int'
            },
            {
                name: 'Nombre',
                type: 'string'
            },
            {
                name: 'Estado',
                type: 'int'
            },
            {
                dateFormat: 'd/m/Y',
                name: 'FechaCreacion',
                type: 'string'
            }
        ]
});


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'Empresa',
        //autoLoad: true,
        proxy: {
            type: 'jsonp',
            api: {
                read: 'http://fplweb2.localhost/empresa/listar/',
                write: 'http://fplweb2.localhost/empresa/grabar/',
                update: 'http://fplweb2.localhost/empresa/grabar/',
                destroy: 'http://fplweb2.localhost/empresa/eliminar/',
            },
            reader: {
                type: 'json',
                root: 'listaempresas'
                },
                writer: {
                    type: 'json'
                }
        },
        sorters: [{
            property: 'start',
            direction: 'ASC'
        }]
    });

    store.load();

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });

    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'Id',
                text: 'Id',
                editor: 'numberfield'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'Nombre',
                text: 'Nombre',
                editor: 'textfield'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'Estado',
                text: 'Estado',
                editor: 'numberfield'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'FechaCreacion',
                text: 'FechaCreacion',
                editor: 'datefield'
            }
        ],
        renderTo: Ext.getBody(),
        height: 600,
        title: 'Lista de Empresas',
        tbar: [{
            text: 'Agregar Empresa',
            handler : function() {
                rowEditing.cancelEdit();

                // Create a model instance
                var r = Ext.create('Empresa', {
                    Id: store.getCount() + 1,
                    Nombre: 'Nueva Empresa',
                    Estado: '1',
                    FechaCreacion: Ext.Date.clearTime(new Date())
                });

                store.insert(0, r);
                rowEditing.startEdit(0, 0);
                console.log('Antes de' + store.getCount());
                //store.sync();
                console.log('Despues de: ' + store.getCount());
            }
        }, {
            itemId: 'removeEmpresa',
            text: 'Eliminar Empresa',
            handler: function() {
                var sm = grid.getSelectionModel();
                rowEditing.cancelEdit();
                store.remove(sm.getSelection());
                if (store.getCount() > 0) {
                    sm.select(0);
                }
            },
            disabled: true
        }],
        plugins: [rowEditing],
        listeners: {
            'selectionchange': function(view, records) {
                grid.down('#removeEmpresa').setDisabled(!records.length);
            }
        }
    });
});

and this is what my servers side script returns to reader:

{"listaempresas":[{"Id":"1","Nombre":"DyS Nevados SRL","Estado":"1","FechaCreacion":"2013-05-13 10:40:00"}]}

I had read in some post that I need to do a store.sync() but I get an error. I am using extj 4.2. So looking in documentation, that method doesn't exists. What I'm doing wrong?

Answer 1

Enable autoSync of your Store:

var store = Ext.create('Ext.data.Store', {
    autoSync : true
    // ...
}

The default value is false. Now the store will automatically sync after every edit.