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

Example: CRUD operation in ExtJS 4 form using Ajax Request.

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=btnUpdate]' : 
            {
                click : this.onUpdateClick
            },
            'viewport > StudentMaster button[itemId=btnDelete]' : 
            {
                click : this.onDeleteClick
            },
            'viewport > StudentMaster button[itemId=btnLoad]' : 
            {
                click : this.onLoadClick
            },
            '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 data to create.');
            return;
        }
        else if( ! stdMaster.isValid()){
            Ext.Msg.alert('Status', 'Invalid data.');
            return;
        }
        
        var student = Ext.create('School.model.Student'), data,
        url = '/ExtJS4Training/DemoService.svc/createstudent/';
        
        student.set(stdMaster.getValues());
        data = student.getData();
        
        Ext.Ajax.request({
            url : url,
            method : 'POST',
            jsonData : data,
            headers : 
            {
                'Content-Type' : 'application/json'
            },
            success : function(response){
                // process server response here
                //re-load student data with id to set dirty = false, if trackResetOnLoad is true
                var student = Ext.create('School.model.Student');
                var resp = Ext.decode(response.responseText);
                
                if(resp.success){
                    // 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);
                }
                else{
                    
                    Ext.Msg.alert('Status', resp.message);
                }
                
                Ext.Msg.alert('Status', 'Saved successfully.');
            },
            failure : function(response){
                Ext.Msg.alert('Status', 'Save Failed.');
                
            }
        });
    },
    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 student = Ext.create('School.model.Student'), data,
        url = '/ExtJS4Training/DemoService.svc/updatestudent/';
        
        student.set(stdMaster.getValues());
        data = student.getData();
        
        Ext.Ajax.request({
            url : url,
            method : 'POST',
            //rawData: Ext.JSON.encode(data),
            jsonData : data,
            headers : 
            {
                'Content-Type' : 'application/json'
            },
            success : function(response){
                // process server response here
                //re-load student data with id to set dirty = false, if trackResetOnLoad is true
                var student = Ext.create('School.model.Student');
                var resp = Ext.decode(response.responseText);
                
                if(resp.success){
                    // 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.');
                }
                else{
                    
                    Ext.Msg.alert('Status', resp.message);
                }
            },
            failure : function(response){
                Ext.Msg.alert('Status', 'Request Failed.');
                
            }
        });
        
    },
    
    onLoadClick : function(){
        var me = this;
        
        Ext.Ajax.request({
            url : '/ExtJS4Training/DemoService.svc/readstudent/',
            method : 'GET',
            timeout : 60000,
            params : 
            {
                id : 1
                // loads student whose Id is 1
            },
            headers : 
            {
                'Content-Type' : 'application/json'
            },
            success : function(response){
                // process server response 
                var stdMaster = me.getStudentMasterForm(), resp = Ext.decode(response.responseText);
                
                if(resp.success){
                    var student = Ext.create('School.model.Student');
                    student.set(resp.data[0]);
                    stdMaster.loadRecord(student);
                    Ext.Msg.alert('Status', 'Records loaded successfully.');
                }
                else{
                    
                    Ext.Msg.alert('Status', resp.message);
                }
                
            },
            failure : function(response){
                Ext.Msg.alert('Status', 'Request Failed.');
                
            }
        });
        
    },
    
    onDeleteClick : function(){
        var me = this, stdMaster = me.getStudentMasterForm();
        
        if( ! stdMaster.getValues(false, false, false, true).Id){
            Ext.Msg.alert('Status', 'Invalid or No data to delete.');
            return;
        }
        
        var student = Ext.create('School.model.Student'), data;
        
        student.set(stdMaster.getValues());
        data = student.getData();
        
        Ext.Msg.show({
            title : 'Delete',
            msg : 'Do you want to delete this record? ',
            width : 300,
            closable : false,
            buttons : Ext.Msg.YESNO,
            icon : Ext.Msg.QUESTION,
            fn : function(buttonValue, inputText, showConfig){
                if(buttonValue === 'yes'){
                    
                    Ext.Ajax.request({
                        url : '/ExtJS4Training/DemoService.svc/deletestudent/',
                        method : 'POST',
                        jsonData : data,
                        headers : 
                        {
                            'Content-Type' : 'application/json'
                        },
                        success : function(response){
                            // process server response 
                            var stdMaster = me.getStudentMasterForm(), resp = Ext.decode(response.responseText);
                            
                            if(resp.success){
                                Ext.Msg.alert('Status', 'Deleted successfully.');
                                stdMaster.clearForm();
                            }
                            else
                                Ext.Msg.alert('Status', 'Could not delete the record. Try again.');
                            
                        },
                        failure : function(response){
                            Ext.Msg.alert('Status', 'Request Failed.');
                            
                        }
                    });
                }
            }
            
        });
        
    },
    
    onResetClick : function(){
        this.getStudentMasterForm().getForm().reset();
    },
    
    onClearClick : function(){
        this.getStudentMasterForm().clearForm();
    }
});

Preview