How to bind Sencha Extjs Grid From Database .

Question

How to bind Sencha  Extjs Grid From Database .

Anonymous User · Answer

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 =andgt; new {ID=x.UserId, UserFname = x.UserFname, UserLname = x.UserLname }).ToList();                     return Json(new { data = result, totalCount = result.Count() }, JsonRequestBehavior.AllowGet);
        }
    }
}@{    ViewBag.Title = "Login";}
andlt;h2 style="width: 500px; font-size: 30px; color: #157FCC;"andgt;Sencha Touchandlt;/h2andgt;
andlt;link href="~/ext-6.0.2/build/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" /andgt;
andlt;script src="~/Scripts/jquery-1.7.1.min.js"andgt;andlt;/scriptandgt;
andlt;script src="~/ext-6.0.2/build/ext-all.js"andgt;andlt;/scriptandgt;
andlt;scriptandgt;
    $(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,
        });
    });    
andlt;/scriptandgt;c

forum

How to bind Sencha Extjs Grid From Database .

Anonymous User

Can you answer this question?

1 Answers

Liked By