---
title: "Crud Operation in ExtJs"
description: "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"
author: "Hemant Patel"
published: 2017-02-02
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/12244/crud-operation-in-extjs
category: "sencha extjs"
tags: ["sencha"]
reading_time: 26 minutes
---
# Crud Operation in ExtJs
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.***
\
***\***
##### Code of html page(index.html)
```
//import javascript file by drag and drop
```
##### 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; } }}
```
---
Original Source: https://www.mindstick.com/articles/12244/crud-operation-in-extjs
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.