Example: CRUD operation 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 : 400,
    selType : 'checkboxmodel',
    title : 'Students Information',
    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 : 
                {
                    allowBlank : true
                }
            }, 
            {
                text : "Last Name",
                flex : 1,
                dataIndex : 'lastName',
                editor : 
                {
                    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 : 
                {
                    allowBlank : true
                }
            }, 
            {
                text : "State",
                flex : 1,
                dataIndex : 'state',
                editor : 
                {
                    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/createstudent/',
            update : '/ExampleService.svc/updatestudent/',
            destroy : '/ExampleService.svc/deletestudent/'
        },
        actionMethods : 
        {
            destroy : 'POST',
            read : 'GET',
            create : 'POST',
            update : 'POST'
        }
        
    }
});

Ext.define('School.store.Student',
{
    extend: 'Ext.data.Store',
    model: 'School.model.Student',
    autoLoad: 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=btnCreate]':
            {
                click: this.onCreateClick
            },
            'viewport > StudentGrid button[itemId=btnLoad]':
            {
                click: this.onLoadClick
            },
            'viewport > StudentGrid button[itemId=btnSave]':
            {
                click: this.onSaveClick
            },
            'viewport > StudentGrid button[itemId=btnDelete]':
            {
                click: this.onDeleteClick
            }
        });
    },

    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);

        studentGrid.editingPlugin.startEdit(studentModel, 3);

    },

    onSaveClick: function () {
        var studentGrid = this.getStudentGrid();
        var studentStore = studentGrid.getStore();

        //fires create, update and delete request when calling sync and commit changes in the store when autoSync=false
        studentStore.sync({
            success: function (batch, eOpts) {
                Ext.Msg.alert('Status', 'Changes saved successfully.');
            },
            failure: function (batch, eOpts) {
                Ext.Msg.alert('Status', 'Request failed.');
            }
        });
    },
    onLoadClick: function () {
        var studentStore = Ext.getStore('School.store.Student');
        studentStore.load();
    },

    onDeleteClick: function () {

        var studentGrid = this.getStudentGrid();
        var studentStore = studentGrid.getStore();

        //delete selected rows if selModel is checkboxmodel
        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 : 'anchor',
            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>