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

Ext.define('School.view.StudentMaster', 
{
    extend : 'Ext.form.Panel',
    alias : 'widget.StudentMaster',
    config : {},
    constructor : function(config){
        this.initConfig(config);
        return this.callParent(arguments);
    },
    
    clearForm : function(){
        this.getForm().getFields().each(function(field){
            field.validateOnChange = false;
            field.setValue('');
            field.resetOriginalValue();
        });
    },
    initComponent : function(){
        var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
        
        Ext.apply(this, 
        {
            id : 'StudentMasterId',
            
            title : 'Student Information',
            resizable : false,
            collapsible : true,
            bodyPadding : '5',
            buttonAlign : 'center',
            border : false,
            trackResetOnLoad : true,
            layout : 
            {
                type : 'vbox'
            },
            fieldDefaults: 
            {
                xtype : 'textfield',
                msgTarget : 'side',
                labelAlign : 'top',
                labelStyle : 'font-weight:bold'
            },
            items : [{
                xtype : 'fieldcontainer',
                layout : 'hbox',
                defaultType : 'textfield',
                width : '100%',
                fieldDefaults : 
                {
                    labelAlign : 'top',
                    labelStyle : 'font-weight:bold'
                },
                items : [{
                    fieldLabel : 'Id',
                    name : 'Id',
                    readOnly : true,
                    width : 35
                }, 
                {
                    fieldLabel : 'First Name',
                    flex : 1,
                    name : 'firstName',
                    afterLabelTextTpl : required,
                    margin : '0 0 0 5',
                    allowBlank : false
                }, 
                {
                    name : 'middleName',
                    width : 150,
                    margin : '0 0 0 5',
                    fieldLabel : 'Middle Name:'
                }, 
                {
                    fieldLabel : 'Last Name',
                    flex : 1,
                    margin : '0 0 0 5',
                    name : 'lastName'
                }]
            }, 
            {
                xtype : 'datefield',
                fieldLabel : 'Date of Birth',
                name : 'birthDate'
            }, 
            {
                xtype : 'textfield',
                fieldLabel : 'Address',
                width : '100%',
                name : 'address1'
            }, 
            {
                xtype : 'textfield',
                hideLabel : true,
                name : 'address2',
                width : '100%',
                fieldLabel : 'address2'
                
            }, 
            {
                xtype : 'textfield',
                fieldLabel : 'City',
                width : '100%',
                name : 'city'
            }, 
            {
                xtype : 'textfield',
                fieldLabel : 'state',
                width : '100%',
                name : 'state'
            }],
            buttons : [{
                text : 'Create',
                itemId : 'btnCreate',
                formBind : true
            }, 
            {
                text : 'Read Data',
                itemId : 'btnLoad'
            }, 
            
            {
                text : 'Update',
                itemId : 'btnUpdate',
                formBind : true
            }, 
            {
                text : 'Delete',
                itemId : 'btnDelete',
                formBind : true
            }, 
            {
                text : 'Reset',
                itemId : 'btnReset'
            }, 
            {
                text : 'Clear',
                itemId : 'btnClear'
            }]
        });
        
        this.callParent(arguments);
    }
});

Ext.define('School.model.Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int'},
        { 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'
    }]
});

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

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

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

<!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>