Home > DeveloperSection > Forums > How to bind Sencha Extjs Grid From Database .
Ankit Singh

Total Post:341

Points:2389
Posted on    April-20-2016 10:52 PM

 sencha extjs JQuery  Sencha 
Ratings:


 1 Reply(s)
 289  View(s)
Rate this:
We want to bind Sencha  Extjs Grid From Database .How will do this please help me.


aditya kumar Patel

Total Post:247

Points:1759
Posted on    April-20-2016 10:54 PM

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

Don't want to miss updates? Please click the below button!

Follow MindStick