---
title: "How to bind Sencha  Extjs Grid From Database ."  
description: "How to bind Sencha  Extjs Grid From Database ."  
author: "Anonymous User"  
published: 2016-04-20  
updated: 2016-04-20  
canonical: https://www.mindstick.com/forum/34107/how-to-bind-sencha-extjs-grid-from-database  
category: "sencha extjs"  
tags: ["jquery", "sencha"]  
reading_time: 2 minutes  

---

# How to bind Sencha  Extjs Grid From Database .

We want to bind Sencha [Extjs](https://www.mindstick.com/forum/34106/how-to-use-extjs-grid) [Grid](https://www.mindstick.com/forum/369/how-can-i-add-a-column-name-to-my-grid) From [Database](https://www.mindstick.com/articles/12226/use-of-database-in-sencha-extjs-and-insert-record-from-user-form-using-ajax) .How will do this please help me.

## Replies

### Reply by Anonymous User

```
using Sencha.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Data;using System.Data.SqlClient;namespace Sencha.Controllers{
    public class HomeController : Controller    {
        [HttpGet]        public ActionResult Grid()        {
            return View();
        }
        [AcceptVerbs(HttpVerbs.Get)]        public JsonResult GetData()        {
            var result=db.Users.Select(x => new {ID=x.UserId, UserFname = x.UserFname, UserLname = x.UserLname }).ToList();                     return Json(new { data = result, totalCount = result.Count() }, JsonRequestBehavior.AllowGet);
        }
    }
}
```

```
@{    ViewBag.Title = "Login";}
<h2 style="width: 500px; font-size: 30px; color: #157FCC;">Sencha Touch</h2>
<link href="~/ext-6.0.2/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/ext-6.0.2/build/ext-all.js"></script>
<script>
    $(document).ready(function () {
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
                 { name: 'ID', type: 'int' },
                { name: 'UserFname', type: 'string' },
                { name: 'UserLname', type: 'string' }
            ]
        });
        var user = Ext.create('Ext.data.Store', {
            storeId: 'user',
            model: 'User',
            autoLoad: 'true',
            proxy: {
                type: 'ajax',
                url: '/Home/GetData',
                reader: { type: 'json', root: 'data' }
            }
        });
        Ext.create('Ext.grid.Panel', {
            store: user,
            id: 'user',
            title: 'Users',
            columns: [
                { header: 'ID', dataIndex: 'ID', width: 100 },
                { header: 'First Name', dataIndex: 'UserFname', width: 250 },
                { header: 'Last Name', dataIndex: 'UserLname', width: 250 }
            ],
            height: 300,
            width: 600,
            renderTo: Ext.getBody(),
            bbar: new Ext.PagingToolbar({
                store: user,
                            pageSize: 2,
                            displayInfo: true,
                            displayMsg: 'Displaying employees {0} - {1} of {2}',
                            emptyMsg: "No employees to display"
            }),
            pageSize: 2,
        });
    });
</script>
```

```
c
```


---

Original Source: https://www.mindstick.com/forum/34107/how-to-bind-sencha-extjs-grid-from-database

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.