How to bind Sencha Extjs Grid From Database .

Anonymous User 2918 20 Apr 2016

We want to bind Sencha Extjs Grid From Database .How will do this please help me.

Anonymous User

Other

I am a content writter !

1 Answers

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>

forum

How to bind Sencha Extjs Grid From Database .

Can you answer this question?

1 Answers