Ext.application({
    extend: 'Ext.app.Application',   //extend app.Application class
    requires: ['Ext.container.Viewport', 'app.view.TabView'],   // Define your requirements thats you call in this file
    name: 'app',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'anchor',
            items: [{
                xtype: 'TabView'  //Define your type of component,Its define in alias of TabView class
            }]
        });
    }
});

Ext.define('app.view.TabView', {
    extend: 'Ext.tab.Panel',  //extend tab.Panel class
    requires: ['app.controller.TabController', 'app.view.UserGridView', 'app.view.UserFormView'],  //define requirement of classes
    alias: 'widget.TabView',
    width: 500,
    height: 400,
    //layout: { type: 'absolute', align: 'middle', pack: 'center' },
    bodyPadding: 15,
    controller: 'tabController',  //use controller
    initComponent: function () {
        Ext.apply(this, {
    items: [   //Items of tabview
    {
        title: 'Testing Tab 1',
        width: '100%',
        height: 300,
        margin: '5 5 5 5',
        items: [
        {
            xtype: 'userFormView'  //use userFormView by define alias in userFormView
        }
        ]
    },
    //{
    //    title: 'Testing Tab 2',
    //    items: [
    //    {
    //        xtype: 'userGridView'
    //    }
    //    ],
    //},
    {
        title: 'Testing Tab 2',    //Third tab display details
        html: 'Its a example of card view with tabs,thats provide multiple task at one place using multiple page accessed by tabs',
    }
    ]
    });
    this.callParent(arguments);
    }
});

Ext.define('app.view.UserFormView',    //define UserFormView class
{
    extend: 'Ext.form.Panel',   //extend  form.Panel class
    requires: ['app.controller.TabController','app.view.UserWindow'], //define requirements
    border: true,
    padding: 10,
    margin: '5 5 5 5',
    id: 'userForm',
    title: 'User Form',
    layout:   //define layout
    {
        type: 'anchor',
        pack: 'center',
    },
    anchor:'250 250',
    controller: 'tabController',
    alias: 'widget.userFormView',//define alias for direct accessing in other form
    items: [
        {
            xtype: 'hiddenfield',  //use hiddenfield for direct accessing of data without display
            name: 'ID',
            itemId: 'ID',
        },
    {
        xtype: 'trigger',  //use trigger for browse user record in grid and also use as a textfield
        fieldLabel: 'Name',
        name: 'Name',
        itemId: 'txtName',
        
        triggerCls: 'x-form-search-trigger', //for browse symbol
        onTriggerClick: function () {   //define function on trigger click
            var window = Ext.create('app.view.UserWindow');  //create popup window
            window.show();  //call show mwthod
        }
    },
    {
        xtype: 'textfield',
        fieldLabel: 'Father name',
        name: 'FatherName',
        maskRe:/[^@#$%&*0-9^]/,  //validation tool for  write only alphabets in textfield
        itemId: 'txtfatherName',
    },
    {
        xtype: 'datefield',
        fieldLabel: 'D.O.B',
        name: 'DOB',
        maskRe: /[^a-zA-Z0-9~!@#$%^&*+-/^]/, //validation tool for  select only datefield
        itemId: 'dtfield'
    },
    {
        xtype: 'textarea',
        fieldLabel: 'Address',
        name: 'Address',
        itemId: 'txtAreaAddress',
        reference: 'txtAreaAddress'
    },
    {
        xtype: 'textfield',
        fieldLabel: 'Contact Number',
        name: 'PhoneNo',
        maskRe: /[^a-zA-Z!@#$%^&*()_+=-~^]/, //validation tool for insert only numeric data in textfield
        itemId: 'nmbrFldContactNo'
    },
    {
        xtype: 'container', // use container for more than one buttons as your requirement.Its not mandetory thats you use container for buttons or other components
        layout: { type: 'hbox', pack: 'center' },
        width: '100%',
        //margin:'5 5 5 5',
        items: [
        {
            xtype: 'button',
            text: 'Submit',
            width: '25%',
            layout: '',
            itemId: 'saveBtnId',
            listeners: //implement listener for call function of controller
                {
                    click: 'saveClick' //call method of controller on button click
                }
        },
        {
            xtype: 'button',
            name: 'delete',
            width: '25%',
            itemId: 'deleteBtnId',
            text: 'Delete',
            listeners: //implement listener for call function of controller
                {
                    click: 'deleteClick' //call method of controller on button click
                }
        },
        {
            xtype: 'button',
            name: 'update',
            width: '25%',
            itemId: 'updateBtnId',
            text: 'Update',
            listeners: //implement listener for call function of controller
                {
                    click: 'updateClick' //call method of controller on button click
                }
        }
        ]
    }
    ]
});

Ext.define('app.view.UserWindow', {  //define UserWindow
    extend: 'Ext.window.Window',  //extend wimdow class
    requires: ['app.controller.TabController', 'app.view.UserGridView'],//requirement of class that use in this page
    controller: 'tabController',//use controller
    title: 'User Details',
    autoScroll:true,
    alias: 'widget.userWindow',//define alias
    height: 400,
    width: 600,
    id: 'popWindow',
    itemID: 'popWindow',
    items: [
    {
        xtype: 'userGridView',  //use grid view
    }
    ]
});

Ext.define('app.view.UserGridView', {  //define UserGridView class
    extend: 'Ext.grid.Panel',   //extend grid.Panel class
    alias: 'widget.userGridView',  //define alias for direct access
    controller: 'tabController',  //use controller
    width: 700,
    height: 600,
    id: 'userGrid',
    itemId: 'userGrid',
    //autoScroll: true,
    initComponent: function () {  //define initComponent function
        Ext.apply(this, {    //
            store: Ext.create('app.store.TabStore'),  //use store by given its path
            columns: [  
            {
                text: 'Id',
                dataIndex: 'ID',
                itemId: 'Id'
            },
            {
                text: 'Name',
                dataIndex: 'Name',
                itemId: 'name'
            },
            {
                text: 'Father Name',
                dataIndex: 'FatherName',
                itemId: 'fatherName'
            },
            {
                text: 'DOB',
                dataIndex: 'DOB',
                itemId: 'dob',
            },
            {
                text: 'Address',
                dataIndex: 'Address',
                itemId: 'address'
            },
            {
                text: 'Contact No',
                dataIndex: 'ContactNo',
                itemId: 'contactNo'
            }
            ],
            listeners: {   //define listener amd call gridItemSelected function on item double click of user record in grid
                itemdblclick: 'gridItemSelected'
            }
        });
        this.callParent(arguments);
    }
});

Ext.define('app.model.TabModel', {   //define model TabModel class
    extend: 'Ext.data.Model',  //extend data.Model class
    fields: [      //define properties of textfields thats use in the user form
        { name: 'ID', type: 'int' },   
        { name: 'Name', type: 'string' },
        { name: 'FatherName', type: 'string' },
        { name: 'DOB', type: 'date', dateFormat: 'MS' },
        { name: 'Address', type: 'string' },
        { name: 'ContactNo', type: 'int' }
    ]
});

Ext.define('app.store.TabStore',  //define TabStore class
    {
        extend: 'Ext.data.Store',   //extend data.Store
        model: 'app.model.TabModel',   //use model and give its path
        storeId: 'tabStore',
        autoLoad: true,
        proxy: {  
            type: 'ajax',
            url: './User/Show',   //give path of Show method in MVC controller
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });

Ext.define('app.controller.TabController', {  //define TabController class
    extend: 'Ext.app.ViewController',  //extend app.ViewController class
    alias: 'controller.tabController',   //define alias
    requires: ['app.model.TabModel'],   //define requirement of TabModel class
    views: ['TabView', 'userGridView', 'userFormView', 'app.view.UserWindow'],  //define views that use in this form
   
    saveClick: function () {   //define save function on save button click
        var form = Ext.getCmp('userForm');   //get component of userForm and assign value into form variable
        var values = form.getValues();   //call getValue function by association of form variable and assign into values variable
        Ext.Ajax.request({   //send Ajax request to MVC controller request
            url: './User/Save',   //give path of method define in MVC controller
            method: 'POST',   //use POST method 
            jsonData: values,   //send values in the form of jsonData
            success: function (response) {   //define success function
                var result = Ext.decode(response.responseText);  //decode responseText return by jsondata assign into result variable
                if (result.success === true) {   //check condition if result.success is true
                    Ext.Msg.show({   //create msg show box
                        title: 'EMPLOYEE',  //define title
                        msg: result.message,  //asign result.message value into msg
                        buttons: Ext.Msg.OK,  //create response Ok button
                        icon: Ext.MessageBox.INFORMATION  //create message box and display information
                    });
                }
                else {
                    Ext.Msg.show({
                        title: 'EMPLOYEE',
                        msg: result.message,
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.ERROR
                    });
                }
            },
            failure: function () {
                Ext.Msg.show({
                    title: 'Record not inserted',
                    msg: result.message,
                    buttons: Ext.Msg.OK,
                    icon: Ext.MessageBox.ERROR
                });
            }
        });
    },
    gridItemSelected: function (record, model, div, e) {  //define method of gridItemSelected function thats call on double click of grid row
        var address = Ext.ComponentQuery.query("#txtAreaAddress")[0];   //get component by its itemId and assign into address variable
        address.setValue(model.data.Address);   //get value by grid view model variable associate with data and dataIndex(Address) and set value into textfield
        var name = Ext.ComponentQuery.query("#txtName")[0];  //get component by its itemId and assign into name variable
        name.setValue(model.data.Name);  //get value by grid view model variable associate with data and dataIndex and set value into textfield
        var fatherName = Ext.ComponentQuery.query("#txtfatherName")[0];  //get component by its itemId and assign into fatherName variable
        fatherName.setValue(model.data.FatherName);  //get value by grid view model variable associate with data and dataIndex and set value into textfield
        var dob = Ext.ComponentQuery.query("#dtfield")[0];  //get component by its itemId and assign into dob variable
        dob.setValue(model.data.DOB);  //get value by grid view model variable associate with data and dataIndex and set value into textfield
        var contactNo = Ext.ComponentQuery.query("#nmbrFldContactNo")[0];  //get component by its itemId and assign into contactNo variable
        contactNo.setValue(model.data.ContactNo);  //get value by grid view model variable associate with data and dataIndex and set value into textfield
        var id = Ext.ComponentQuery.query("#ID")[0];  //get component by its itemId and assign into id variable
        id.setValue(model.data.ID);  //get value by grid view model variable associate with data and dataIndex and set value into textfield
        //var grid = Ext.ComponentQuery.query("#userGrid")[0];
        //grid.setVisible(false);
        //var popWindow = Ext.ComponentQuery.query('#popWindow')[0];
        //popWindow.hide();
        Ext.getCmp('popWindow').destroy();  //get popup window by its id and destroy window when record selected
    },
    updateClick: function () {  //updateClick function call on update button click
        var form = Ext.getCmp('userForm');   //get component of userForm and assign value into form variable
        var values = form.getValues();  //call getValue function by association of form variable and assign into values variable
        Ext.Ajax.request({     //send Ajax request to MVC controller request
            url: './User/Update',   //give path of method define in MVC controller
            method: 'POST',     //use POST method 
            jsonData: values,   //send values in the form of jsonData
            success: function (response) {      //define success function
                var result = Ext.decode(response.responseText);
                if (result.success === true) {
                    Ext.Msg.show({
                        title: 'EMPLOYEE',
                        msg: result.message,
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.INFORMATION
                    });
                }
                else {
                    Ext.Msg.show({
                        title: 'EMPLOYEE',
                        msg: result.message,
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.ERROR
                    });
                }
            },
            failure: function () {    //define failure function on response of mvc controller
                Ext.Msg.show({
                    title: 'Record not Updated',
                    msg: result.message,
                    buttons: Ext.Msg.OK,
                    icon: Ext.MessageBox.ERROR
                });
            }
        });
    },
    deleteClick: function () {    //define deleteClick function on delete button click
        var form = Ext.getCmp('userForm');
        var values = form.getValues();
        Ext.Ajax.request({
            url: './User/Delete',
            method: 'POST',
            jsonData: values,
            success: function (response) {
                var result = Ext.decode(response.responseText);
                if (result.success === true) {
                    Ext.Msg.show({
                        title: 'Response if success true',
                        msg: result.message,
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.INFORMATION
                    });
                }
                else {
                    Ext.Msg.show({
                        title: 'Response if success false',
                        msg: result.message,
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.ERROR
                    });
                }
            },
            failure: function () {
                Ext.Msg.show({
                    title: 'Record not deleted',
                    msg: result.message,
                    buttons: Ext.Msg.OK,
                    icon: Ext.MessageBox.ERROR
                });
            }
        });
    }
});

using _20012017.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
namespace _20012017.Controllers
{
    public class UserController : Controller
    {
        //
        // GET: /User/
        static string message = string.Empty;   //define string type static variable 
        static bool success = false;   //define bool type static variable
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Save(Employee model) //define Save function thats call from controller.Its return type is JsonResult 
        {
            try    //all statement written in try block thats may be causes abnormal conditions(exception)
            {
                using (harsh_dbEntities db = new harsh_dbEntities()) //harsh_dbEntities is object thats add on ADO.NET Entity Data Model
                {
                    db.EmployeeMaster.Add(new EmployeeMaster  //EmployeeMaster is table name in database and Add function call for store data into database
                    {
                        Address = model.Address,  //store data into database table column Address
                        ContactNo = model.PhoneNo,  //store data into database table column ContactNo
                        DOB = model.DOB,   //store data into database table column DOB
                        FatherName = model.FatherName,   //store data into database table column FatherName
                        Name = model.Name   //store data into database table column Name
                    });
                    db.SaveChanges();  //call function SaveChanges() associated with database object db for save change into database
                    success = true;
                    message = "Record saved successfully";
                }
            }
            catch (Exception ex)
            {
                success = false;
                message = ex.Message;
            }
            return Json(  //return response in the form of Json
                new
                {
                    success,
                    message
                }, JsonRequestBehavior.AllowGet);
        }
        public JsonResult Show()  //define Show function 
        {
            try
            {
                using (harsh_dbEntities db = new harsh_dbEntities())//harsh_dbEntities is object thats add on ADO.NET Entity Data Model
                {
                    var data = db.EmployeeMaster.ToList();  //get all data from database and assign in data variable
                    success = true;
                    return Json(
                                new
                                {
                                    data,
                                    success
                                }, JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                success = false;
                message = ex.Message;
                return Json(
                                new
                                {
                                    success,
                                    message
                                }, JsonRequestBehavior.AllowGet);
            }
        }
        [HttpPost]
        public JsonResult Update(Employee model)
        {
            try
            {
                using (harsh_dbEntities db = new harsh_dbEntities())
                {
                    //int id = Convert.ToInt32(model.ID);
                    var data = db.EmployeeMaster.FirstOrDefault(x => x.ID == model.ID);  //FirstOrDefault function to select single record for get ID and check its equal to id return 
                    data.Name = model.Name;  //update data into database column Name
                    data.ContactNo = model.PhoneNo;   //update data into database column ContactNo
                    data.FatherName = model.FatherName;   //update data into database column Address
                    data.Address = model.Address;  //update data into database column Address
                    data.DOB = model.DOB;   //update data into database column DOB
                    //db.EmployeeMaster.Attach(data);
                    db.SaveChanges();  //call SaveChanges() function
                    success = true;
                    message = "Record updated successfully";
                }
            }
            catch (Exception ex)
            {
                success = false;
                message = ex.Message;
            }
            return Json(
                new
                {
                    success,
                    message
                }, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult Delete(Employee model)
        {
            try
            {
                using (harsh_dbEntities dbs = new harsh_dbEntities())
                {
                    var data = dbs.EmployeeMaster.Where(a => a.ID == model.ID).FirstOrDefault();//when we select multiple record then write .ToList() instead of FirstOrDefault() 
                    if (data != null)  //check condition if data is not null false 
                    {
                        dbs.EmployeeMaster.Remove(data);  //delete record in database,call Remove function and pass object of selected column
                        dbs.SaveChanges();  //call SaveChanges() function
                        success = true;
                        message = "Record deleted successfully";
                    }
                    else
                    {
                        success = false;
                        message = "Please select record on grid";
                    }
                }
            }
            catch (Exception ex)
            {
                success = false;
                message = ex.Message;
            }
            return Json(  //return Json data
                new
                {
                    success,
                    message
                }, JsonRequestBehavior.AllowGet);
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace _20012017.Models
{
    public class Employee
    {
        public Int32 ID { get; set; }
        public string Name { get; set; }
        public string FatherName { get; set; }
        public DateTime DOB { get; set; }
        public string Address { get; set; }
        public string PhoneNo { get; set; }
    }
}