Example: CRUD operation in ExtJS 4 form using Model object.

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

    refs: [{
        ref: 'studentMasterForm',
        selector: 'viewport > StudentMaster'
    }],

    init: function () {
        this.control({

            'viewport > StudentMaster button[itemId=btnCreate]': {
                click: this.onCreateClick
            },
            'viewport > StudentMaster button[itemId=btnLoad]': {
                click: this.onLoadClick
            },
            'viewport > StudentMaster button[itemId=btnUpdate]': {
                click: this.onUpdateClick
            },
            'viewport > StudentMaster button[itemId=btnDelete]': {
                click: this.onDeleteClick
            },
            'viewport > StudentMaster button[itemId=btnReset]': {
                click: this.onResetClick
            },
            'viewport > StudentMaster button[itemId=btnClear]': {
                click: this.onClearClick
            }
        }
            );
    },

    onUpdateClick: function () {

        var stdMaster = this.getStudentMasterForm();

        if (!stdMaster.isDirty()) {
            Ext.Msg.alert('Status', 'No pending changes to save.');
            return;
        }
        else if (!stdMaster.isValid()) {
            Ext.Msg.alert('Status', 'Invalid data.');
            return;
        }

        var studentModel = Ext.create('School.model.Student');

        studentModel.set(stdMaster.getValues());

        var mask = new Ext.LoadMask(stdMaster, { msg: "Updating..." });
        mask.show();

        studentModel.save({
            scope: this, //controller would be accessible inside load
            success: function (record, operation) {
                try {
                    var resp = Ext.decode(operation.response.responseText);
                    if (resp.success) {
                        //set the root in proxy to indicate where the student data in the response
                        var student = Ext.create('School.model.Student');
                        student.set(resp.data[0]);
                        this.getStudentMasterForm().loadRecord(student);

                        Ext.Msg.alert('Status', 'Student updated successfully.');
                    }
                    else
                        Ext.Msg.alert('Status', resp.message);
                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Invalid data in server response: ' + ex.Message);

                }
                mask.hide();
            },
            failure: function (record, operation) {
                Ext.Msg.alert('Save Failed', operation.response.responseText);
                try {
                    var resp = Ext.decode(operation.response.responseText);
                    Ext.Msg.alert('Status', resp.message);

                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Not a valid data.' + ex.Message);
                }
                mask.hide();
            }
        });

    },

    onLoadClick: function () {

        var existingStudent = Ext.ModelMgr.getModel('School.model.Student');
        var stdMaster = this.getStudentMasterForm();
        var mask = new Ext.LoadMask(stdMaster, { msg: "Loading..." });
        mask.show();

        existingStudent.load(1, {
            scope: this, //controller would be accessible inside load
            failure: function (record, operation) {
                mask.hide();
                Ext.Msg.alert('Status', 'Service request faild.');
            },
            success: function (record, operation) { //do something if the load succeeded
                //if service response object has same properties and heirarchy as model object then you can model.loadRecord(record)
                //otherwise you have to decode operation.response.responseText, create model object and populate valudes of decoded response into model and then use model.loadRecord()
                try {
                    //                    var resp = Ext.decode(operation.response.responseText);
                    //                    if (resp.success) {
                    //                        //set the root in proxy to indicate where the student data in the response
                    //                        var student = Ext.create('School.model.Student');
                    //                        student.set(resp.data[0]);

                    //                        this.getStudentMasterForm().loadRecord(student);
                    //                        Ext.Msg.alert('Status', 'Records loaded successfully.');
                    //                    }
                    //                    else
                    //                        Ext.Msg.alert('Status', resp.message);

                    //following also valid
                    this.getStudentMasterForm().loadRecord(record);
                    Ext.Msg.alert('Status', 'Records loaded successfully.');

                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Invalid data in server response: ' + ex.Message);

                }
                mask.hide();
            }
        });

    },

    onCreateClick: function () {
        var stdMaster = this.getStudentMasterForm();

        if (!stdMaster.isDirty()) {
            Ext.Msg.alert('Status', 'No new data to create.');
            return;
        }
        else if (!stdMaster.isValid()) {
            Ext.Msg.alert('Status', 'Invalid data.');
            return;
        }

        var studentModel = Ext.create('School.model.Student');

        studentModel.set(stdMaster.getValues());

        var mask = new Ext.LoadMask(stdMaster, { msg: "Saving..." });
        mask.show();

        studentModel.save({
            scope: this, //controller would be accessible inside load
            success: function (record, operation) { //do something if the load succeeded
                //if service response object has same properties and heirarchy as model object then you can model.loadRecord(record)
                //otherwise you have to decode operation.response.responseText, create model object and populate valudes of decoded response into model and then use model.loadRecord()
                try {
                    //                    var resp = Ext.decode(operation.response.responseText);
                    //                    if (resp.success) {
                    //                        //set the root in proxy to indicate where the student data in the response
                    //                        var student = Ext.create('School.model.Student');
                    //                        student.set(resp.data[0]);
                    //                        this.getStudentMasterForm().loadRecord(student);
                    //                          Ext.Msg.alert('Status', resp.message);
                    //                    }
                    //                    else
                    //                        Ext.Msg.alert('Status', resp.message);
                    //or
                    this.getStudentMasterForm().loadRecord(record);
                    Ext.Msg.alert('Status', 'Student Saved Successfully!');


                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Invalid data in server response: ' + ex.Message);
                }
                mask.hide();
            },
            failure: function (record, operation) {
                mask.hide();
                Ext.Msg.alert('Status', 'Service request faild.');
            }

        });

    },

    onDeleteClick: function () {

        var stdMaster = this.getStudentMasterForm();

        if (!stdMaster.getValues(false, false, false, true).Id) {
            Ext.Msg.alert('Status', 'Invalid or no data.');
            return;
        }

        var studentModel = stdMaster.getRecord();
        var mask = new Ext.LoadMask(stdMaster, { msg: "Deleting..." });
        mask.show();

        studentModel.destroy({
            scope: this, //controller would be accessible inside load
            failure: function (record, operation) {
                mask.hide();
                Ext.Msg.alert('Status', 'Service request faild.');
            },
            success: function (record, operation) {
                try {
                    var resp = Ext.decode(operation.response.responseText);
                    if (resp.success) { // check if delete succeded at server side
                        this.getStudentMasterForm().clearForm();
                    }

                    Ext.Msg.alert('Status', resp.message);
                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Exception: ' + ex.Message);
                }
                mask.hide();
            }
        });
    },
    onResetClick: function () {
        this.getStudentMasterForm().getForm().reset();
    },
    onClearClick: function () {
        this.getStudentMasterForm().clearForm();
    }
});