forum

Home / DeveloperSection / Forums / How to bind Sencha Extjs Grid From Database .

Ask Question

How to bind Sencha Extjs Grid From Database .

Anonymous User248620-Apr-2016
We want to bind Sencha  Extjs Grid From Database .How will do this please help me.
sencha extjsjquery sencha 
Updated on 20-Apr-2016
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

20-Apr-2016 
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>
answer 415872004105426c

Liked By