HOW TO BIND SENCHA EXTJS GRID FROM DATABASE .

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 847  View(s)
Ratings:
Rate this:
We want to bind Sencha  Extjs Grid From Database .How will do this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to bind Sencha Extjs Grid From Database .

    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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!