Example: Batch Sync in ExtJS 4 Grid.

Ext.define('School.view.StudentGrid', 
{
    
    extend : 'Ext.grid.Panel',
    alias : 'widget.StudentGrid',
    id : 'studentsGrid',
    config : {},
    constructor : function(config){
        this.initConfig(config);
        return this.callParent(arguments);
    },
    width : '100%',
    height : 300,
    selType : 'checkboxmodel',
    selModel : 
    {
        mode : 'MULTI'
    },
    viewConfig : 
    {
        stripeRows : true
    },
    initComponent : function(){
        Ext.apply(this, 
        {
            store : 'School.store.Student',
            
            plugins : [Ext.create('Ext.grid.plugin.RowEditing', 
            {
                clicksToEdit : 2
                //if you have checkbox in first row then take clicksToEdit=2 otherwise it will go on edit mode
            })],
            
            columns : [{
                text : "Id",
                dataIndex : 'Id',
                hidden : false,
                width : 35
            }, 
            {
                text : "First Name",
                flex : 1,
                dataIndex : 'firstName',
                editor : 
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank : false
                }
            }, 
            {
                text : "Middle Name",
                flex : 1,
                dataIndex : 'middleName',
                editor : 
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank : true
                }
            }, 
            {
                text : "Last Name",
                flex : 1,
                dataIndex : 'lastName',
                editor : 
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank : true
                }
            }, 
            {
                text : "Birth Date",
                flex : 1,
                dataIndex : 'birthDate',
                editor : 
                {
                    xtype : 'datefield',
                    format : 'd-m-Y',
                    allowBlank : true
                },
                renderer : Ext.util.Format.dateRenderer('d-m-Y')
            }, 
            {
                text : "City",
                flex : 1,
                dataIndex : 'city',
                editor : 
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank : true
                }
            }, 
            {
                text : "State",
                flex : 1,
                dataIndex : 'state',
                editor : 
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank : true
                }
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                layout:
                {
                    pack: 'center'
                },
                defaults:
                {
                    minWidth: 80
                },
                items: [
                {
                    text: 'Create',
                    itemId: 'btnCreate'
                },
                {
                    text: 'Load Data',
                    itemId: 'btnLoad'
                },

                {
                    text: 'Save',
                    itemId: 'btnSave'
                },
                {
                    text: 'Delete',
                    itemId: 'btnDelete'
                }]
            }]
        });
        
        this.callParent(arguments);
    }
});

Ext.define('School.model.Student', 
{
    extend : 'Ext.data.Model',
    idProperty : 'Id',
    fields: [
        { name: 'Id', type: 'int', defaultValue: 0 },
        { name: 'firstName', type: 'string' },
        { name: 'middleName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'birthDate', type: 'date' },
        { name: 'address1', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' }
    ],
    validations : [{
        type : 'presence',
        field : 'firstName'
    }],
    proxy : 
    {
        type : 'ajax',
        reader : 
        {
            root : 'data',
            type : 'json'
        },
        api : 
        {
            read : '/ExampleService.svc/students/',
            create: '/ExampleService.svc/createstudentbatch/',
            update : '/ExampleService.svc/updatestudentbatch/',
            destroy : '/ExampleService.svc/deletestudentbatch/'
        },
        actionMethods : 
        {
            destroy : 'POST',
            read : 'GET',
            create : 'POST',
            update : 'POST'
        },
        writer: {
            type : 'json',
            allowSingle : false // set false to send a single record in array
        }
    }
});

Ext.define('School.store.Student',
{
    extend: 'Ext.data.Store',
    model: 'School.model.Student',
    autoLoad: false,
    autoSync: false,
    storeId: 'Student'
});

Ext.define('School.controller.StudentMaster', 
{
    extend : 'Ext.app.Controller',
    models : ['School.model.Student'],
    stores : ['School.store.Student'],
    views: ['School.view.StudentGrid'],

    refs : [{
        ref : 'studentGrid',
        selector : 'viewport StudentGrid'
    }],
    
    init : function(){
        
        this.control({
            'viewport > StudentGrid button[itemId=btnSave]': 
            {
                click : this.onSaveClick
            },
            'viewport > StudentGrid button[itemId=btnCreate]': 
            {
                click : this.onCreateClick
            },
            'viewport > StudentGrid button[itemId=btnDelete]': 
            {
                click : this.onDeleteClick
            },
            'viewport > StudentGrid button[itemId=btnLoad]' : 
            {
                click : this.onLoadClick
            }
        });
    },
    
    onSaveClick : function(){
        
        
        var studentGrid = this.getStudentGrid();
        var studentStore = studentGrid.getStore(studentStore);
        
        //fires create, update and delete request when calling sync and commit changes in the store when autoSync=false
        studentStore.sync({
            
            success : function(batch, opt){
                Ext.Msg.alert('Status', 'Changes saved successfully.');
            },
            failure : function(batch, opt){
                var msg = '';
                
                if(batch.hasException){
                    
                    for(var i = 0; i < batch.exceptions.length; i ++ ){
                        switch(batch.exceptions[i].action){
                            case "destroy" : 
                                msg = msg + batch.exceptions[i].records.length + " Delete, ";
                                break;
                            case "update" : 
                                msg = msg + batch.exceptions[i].records.length + " Update, ";
                                break;
                            case "create" : 
                                msg = msg + batch.exceptions[i].records.length + " Create, ";
                                break;
                        }
                    }
                    
                    Ext.Msg.alert("Status", msg + " operation failed!");
                }
                else
                    Ext.Msg.alert('Status', 'Changes failed.');
            }
        });
        
        
    },
    
    onLoadClick : function(){
        
        var studentStore = Ext.create('School.store.Student');
        studentStore.load({
            scope : this,
            callback : function(records, operation, success){
                
                var studentGrid = this.getStudentGrid();
                studentGrid.bindStore(studentStore);
            }
        });
        
    },
    onCreateClick : function(){
        
        var studentGrid = this.getStudentGrid();
        var studentStore = studentGrid.getStore();
        
        var studentModel = Ext.create('School.model.Student');
        studentModel.set("firstName", "New student's first name");
        studentModel.set("middleName", "New student's middle name");
        studentModel.set("lastName", "New student's last name");
        studentModel.set("birthDate", "11/01/2011");
        studentModel.set("city", "New city");
        studentModel.set("state", "New state");
        studentStore.add(studentModel);
        
        
    },
    onDeleteClick : function(){
        
        var studentGrid = this.getStudentGrid();
        var studentStore = studentGrid.getStore();
        
        var selectedRows = studentGrid.getSelectionModel().getSelection();
        if(selectedRows.length)
            studentStore.remove(selectedRows);
        else
            Ext.Msg.alert('Status', 'Please select at least one record to delete!');
    }
});

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'School',
    controllers: ['StudentMaster'],

    launch: function () {
        Ext.create('Ext.container.Viewport',
        {
            layout: 'fit',
            items: [{
                xtype: 'StudentGrid'
            }]
        });
    }
});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../ext-4.2.1/ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

</body>
</html>