ExtJS.grid.CRUD

Question

I'm studying ExtJS. I'm trying to make a table with CRUD. This is an example of my code.

Ext.onReady(function(){

       var writer = new Ext.data.JsonWriter({
           encode: true,
           writeAllFields: false
       });

       var proxy = new Ext.data.HttpProxy({
        api: {
            read : 'read',
            create : 'сreate',
            update: 'update',
            destroy: 'delete'
        }
    });

var reader = new Ext.data.JsonReader({
root:'list',
id:'id',
totalProperty: 'totalCount'},
  [
    'id',
    'name',
    'description'
])

    var store = new Ext.data.Store({
           id:'id',
           proxy: proxy,
           reader: reader,
           writer: writer,  
           autoSave: true 
       });

store.load();

var title_edit = new Ext.form.TextField();

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
                renderTo: document.body,
        clickstoEdit: 1,
        columns: [
            {id:'id',header: 'ID', width: 30, dataIndex: 'id',editor: title_edit},
            {header: 'Name', width: 80, dataIndex: 'name',editor: title_edit},
            {header: 'Description', width: 180, dataIndex: 'description',editor: title_edit}
                        ],
           height: 320,
        width: 400,
        title: 'Table',
        loadMask: true,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying movies {0} - {1} of {2}',
            emptyMsg: "No movies found"
        }),
        tbar:
        [
                 {
         text: 'Add',
         handler: function(btn, ev) {
        var u = new store.recordType({
             name: '',
            description : ''
        });

        grid.stopEditing();
        store.insert(0, u);
        grid.startEditing(0, 1);
    }

    }       ]
        });
});

It contains no errors - so says the FireBug. When I click on the button "Add" the following occurs: request to the server is sent with empty values, adding a new line in the table in edit mode.

But this is wrong ...

I watched an example in the documentation:

http://dev.sencha.com/deploy/dev/examples/writer/writer.html

In this example, sending a request to the server is the last stage, first add a new row in the table, then I edit it, and only then - the request to the server.

How do I make the same in my code? please help.

Answer 1

Look into the autoCommit property of the underlying store. IIRC, If autoCommit is false, the store won't interact with the server until you explicitly tell it to commit().