---
title: "Use of database in Sencha ExtJs and insert record from user form using ajax"
description: "In this article we can defined how to connect database and insert record from user interface(User Form)"
author: "Hemant Patel"
published: 2017-01-12
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/12226/use-of-database-in-sencha-extjs-and-insert-record-from-user-form-using-ajax
category: "sencha extjs"
tags: ["sencha"]
reading_time: 3 minutes
---
# Use of database in Sencha ExtJs and insert record from user form using ajax
In this article we can defined how to connect database and insert record from user interface(User Form)
1. Source code of User form design with several textfield as your requirement.
2. In view we can also defined listener in button for send control to MVC controller.
3. In button we can create of object of ajax class.
\
##### View in extjs
```
Ext.onReady(function () { Ext.create('Ext.form.Panel', {//use class for form panel width: 500, height: 300, padding: 10, id: 'UsrFrm', layout: { //define layout types type: 'vbox', pack: 'center', align: 'center' }, title: "User Form", layout: 'form', renderTo: document.body,//associate with body tag bodyPadding: 5, items: [{ xtype: 'textfield', name: 'uName', fieldLabel: 'Name', allowBlank: false }, { xtype: 'textfield', name: 'fName', fieldLabel: 'Father Name' }, { xtype: 'datefield', name: 'dob', fieldLabel: 'D O B' }, { xtype: 'textareafield', name: 'addrss', fieldLabel: 'Address', maxValue: 250 }, { xtype: 'numberfield', name: 'cntct', fieldLabel: 'Contact No.', maxValue: 9999999999, }, { xtype: 'button', text: 'SUBMIT', width: '100%', id: 'sbmtBtn', listeners: { //Implement listener click: function () { var form = Ext.getCmp('UsrFrm'); var values = form.getValues();//get values from form id console.log(values); Ext.Ajax.request({ url: './user/submit',//Defined path of function defined in MVC method: 'POST', controller params: { uName:values.uName,//Bind values with database table field fName:values.fName, uDob: values.dob, uAddrss:values.addrss, contact:values.cntct }, success: function () { alert('success'); }, failure: function () { alert('fail'); } }); } } }], });});
```
##### MVC controller code for connecting database and insert record from user form.
In MVC controller we can use namespace of sqlClient that’s use in database connectivity
for sql server database.
After that we defined method for insert record into database.
```
using System.Web;using System.Web.Mvc;using
System.Data.SqlClient;//Use nameSpace of sql server database connection namespace
ExtJsField.Controllers{ public class userController : Controller {// // GET: /user/ public ActionResult Index() { return View(); }[HttpPost] //defined Method for insert record into
database table UserRecord public void submit(string uName, string fName, string uDob, string uAddrss, int contact) { String cs = "Password=mindstick@123;Persist
Security Info=True;User ID=sa;Initial Catalog=Harsh;Data
Source=MSCLIENT-001\\MSSQLSERVER2014";// Connection String SqlConnection cn = new SqlConnection(cs); cn.Open();//Open Connection String qr = "Insert into UserRecord(Name,Father_Name,Dob,Address,Contact)
values ('"
+ uName + "','"
+ fName + "','"
+ uDob + "','"
+ uAddrss + "','"
+ contact + "')";//Query
for insert record SqlCommand cmd = new SqlCommand(qr, cn); cmd.ExecuteNonQuery(); cn.Close();//Connection Close } }}
```
##### Html page for import javascript and link for display user form
```
//Import UserForm view script
```
##### Database table that’s use for store user records
Create database and insert a table UserRecord for store user details.
\
\
---
Original Source: https://www.mindstick.com/articles/12226/use-of-database-in-sencha-extjs-and-insert-record-from-user-form-using-ajax
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.