Create tab view with user form and grid view. Grid can be call on trigger click and when we click twice on row data of grid then its set on user form textfields. In user form there is three buttons save,delete and update, that’s perform three operations on button click. All operation perform on database record.

This article also helps of newbie on Extjs. Each design of user form or user record design separately and call on our requirement or need. Its also define how to connect database with MVC controller and perform relevant task.

In the way of development we add a javascript file under project name for call and render application. After this we can add a new folder under our project name (like app). And add three folder under this app folder, model, view, controller.

In view folder add a javascript file named as tabView as your need. In tabView create a tabview like this.


Crud Operation in ExtJs

Crud Operation in ExtJs

Code of html page(index.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
    <script src="app.js"></script>  //import javascript file by drag and drop
</head>
<body>
</body>
</html>
Code of app.js file 
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
            }]
        });
    }
});
Code of tabView
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);
    }
});
Code of UserForm
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
                }
        }
        ]
    }
    ]
});
Code of popup Window
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
    }
    ]
});
Code of 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);
    }
});
Code of model defined for form fields
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' }
    ]
});
Code of Store thats use for data store
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'
            }
        }
    });
Code of Controller
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
                });
            }
        });
    }
});
Code of MVC controller thats interact with database and perform Save,Delete
and Update operation according to user need.
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);
        }
    }
}
Code of MVC model thats defined all fields datatypes and give advantage of
perform multiple operations with single parameters.
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; }
    }
}
  Modified On Dec-18-2018 03:08:07 AM

Leave Comment