Application Structure:
  • CRUD-in-Form-submit
    • app
      • controller
        • StudentMaster.js
      • model
        • Student.js
      • store
      • view
        • StudentMaster.js
    • app.js
    • default.html
    • ext-4.2.1
    • resources

Example: CRUD operations in Ext JS 4 form using load() and submit()

controller\StudentMaster.js 
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
            }
        });
    },
    onCreateClick: function () {

        var stdMaster = this.getStudentMasterForm();

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

        if (stdMaster.isValid()) {
            // Submit the Ajax request and handle the response
            stdMaster.submit({
                waitMsg: 'Saving..',
                headers:
                {
                    'Content-Type': 'application/json'
                },
                clientValidation: true,
                success: function (form, action) {

                    var student = Ext.create('School.model.Student');
                    var resp = Ext.decode(action.response.responseText);

                    if (resp.data[0]) {
                        // addstudent returns student model with Id so we can re-load model into form so form will have isDirty false
                        student.set(resp.data[0]);
                        stdMaster.loadRecord(student);
                    }

                    Ext.Msg.alert('Status', 'Saved successfully.');

                },
                failure: function (form, action) {
                    if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                        Ext.Msg.alert('CLIENT_INVALID', 'Something has been missed. Please check and try again.');
                    }
                    if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                    }
                    if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                        Ext.Msg.alert('SERVER_INVALID', action.result.message);
                    }
                }
            });
        }
    },

    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 url = '/ExampleService.svc/createstudent/';

        if (stdMaster.getForm().findField("Id").getValue() != 0) // if id is greater than 0 that means it is update request
            url = '/ExampleService.svc/createstudent/';

        if (stdMaster.isValid()) {

            // Submit the Ajax request and handle the response
            stdMaster.submit({
                url: url,
                waitMsg: 'Updating..',
                headers:
                {
                    'Content-Type': 'application/json'
                },
                clientValidation: true,
                success: function (form, action) {
                    try {
                        var student = Ext.create('School.model.Student');
                        var resp = Ext.decode(action.response.responseText);

                        if (resp.data[0]) {
                            // addstudent returns student model with Id so we can re-load model into form so form will have isDirty false
                            student.set(resp.data[0]);
                            stdMaster.loadRecord(student);
                        }

                        Ext.Msg.alert('Status', 'Saved successfully.');
                    }
                    catch (ex) {
                        Ext.Msg.alert('Status', 'Exception: ' + ex.Message);

                    }
                },
                failure: function (form, action) {
                    if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                        Ext.Msg.alert('CLIENT_INVALID', 'Something has been missed. Please check and try again.');
                    }
                    if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                        Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                    }
                    if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                        Ext.Msg.alert('SERVER_INVALID', action.result.message);
                    }
                }
            });
        }
    },

    onLoadClick: function () {

        var stdMaster = this.getStudentMasterForm();

        //result should contain success=true and data property otherwise it will go to failure even if there is no failure
        stdMaster.load({
            waitMsg: 'Loading...',
            url: '/ExampleService.svc/createstudent/',
            method: 'GET',
            params:
            {
                id: 1
            },
            success: function (form, action) {
                try {
                    var student = Ext.create('School.model.Student');
                    var resp = Ext.decode(action.response.responseText);

                    if (resp.data[0]) {
                        // addstudent returns student model with Id so we can re-load model into form so form will have isDirty false
                        student.set(resp.data[0]);
                        stdMaster.loadRecord(student);
                    }
                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Exception: ' + ex.Message);

                }
            },
            failure: function (form, action) {
                Ext.Msg.alert("Load failed", action.result.errorMessage);
            }
        });

    },


    onDeleteClick: function () {
        //need to send whole model object to delete student instead of only id
        // so service should be written based on that

        var stdMaster = this.getStudentMasterForm();
        if (!stdMaster.getValues(false, false, false, true).Id) {
            Ext.Msg.alert('Status', 'Invalid or No data to delete.');
            return;
        }

        // Submit the Ajax request and handle the response
        stdMaster.submit({
            url: '/ExampleService.svc/createstudent/',
            clientValidation: true,
            waitMsg: 'Deleting..',
            headers:
            {
                'Content-Type': 'application/json'
            },

            success: function (form, action) {
                try {
                    var resp = Ext.decode(action.response.responseText);
                    if (resp.success)
                        stdMaster.clearForm();

                    Ext.Msg.alert('Success', resp.message);
                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Exception: ' + ex.Message);

                }
            },
            failure: function (form, action) {
                if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                    Ext.Msg.alert('CLIENT_INVALID', 'Something has been missed. Please check and try again.');
                }
                if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                    Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                }
                if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                    Ext.Msg.alert('SERVER_INVALID', action.result.message);
                }
            }
        });

    },
    onResetClick: function () {
        this.getStudentMasterForm().getForm().reset();
    },
    onClearClick: function () {
        this.getStudentMasterForm().clearForm();
    }
});

Preview