PDA

View Full Version : extJS pagination with MVC



inboxmohit
5 Feb 2012, 10:44 PM
How we can implement paging through extJS using MVC?
This my view page code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Contact DataGrid using ExtJS & ASP.NET MVC 3</title>
<link rel="stylesheet" type="text/css" href="/Lib/ext-3.3.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/Lib/ext-3.3.1/examples/shared/examples.css" />
<link rel="stylesheet" type="text/css" href="/Lib/ext-3.3.1/examples/ux/css/RowEditor.css" />
<script language="JavaScript" src="/Lib/ext-3.3.1/adapter/ext/ext-base.js" type="text/javascript"></script>
<script language="JavaScript" src="/Lib/ext-3.3.1/ext-all.js" type="text/javascript"></script>
<script language="JavaScript" src="/Lib/ext-3.3.1/examples/ux/RowEditor.js" type="text/javascript"></script>
<style type="text/css">
.icon-user-add
{
background-image: url(/Lib/ext-3.3.1/examples/shared/icons/fam/user_add.gif) !important;
}

.icon-user-delete
{
background-image: url(/Lib/ext-3.3.1/examples/shared/icons/fam/user_delete.gif) !important;
}

.icon-user-save
{
background-image: url(/Lib/ext-3.3.1/examples/shared/icons/save.gif) !important;
}
</style>
</head>
<body>
<center>
<div id="tabsContainer">
<div id="crud-grid">
</div>
</div>
</center>
</body>
</html>
<script type="text/javascript">
if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') {
Ext.BLANK_IMAGE_URL = '/Lib/ext-3.3.1/resources/images/default/s.gif';
}


Ext.onReady(function () {

var tabs = new Ext.TabPanel({
renderTo: 'tabsContainer',
height: 530,
width: 910,
activeTab: 0,
frame: true,
defaults: { autoHeight: true },
items: [
{ contentEl: 'crud-grid', title: 'Customer List' },
{ contentEl: 'parentTab2', title: 'Parent Tab2' }


]
});
var Contact = Ext.data.Record.create([
{
name: 'CustomerID',
type: 'string'
}, {
name: 'CompanyName',
type: 'string'
}, {
name: 'ContactName',
type: 'string'
}, {
name: 'Address',
type: 'string'
}, {
name: 'City',
type: 'string'
}
]);





var writer = new Ext.data.JsonWriter({
encode: false,
listful: true,
writeAllFields: true
});

var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'CustomerID',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, Contact);

var proxy = new Ext.data.HttpProxy({
api: {
read: '/Contact/Load',
create: '/Contact/Create',
update: '/Contact/Update',
canceledit: '/Contact/Cancel',
destroy: '/Contact/Delete'
},
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
});






var store = new Ext.data.Store({
id: 'user',
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
});

// new Ext.data.Store({


Ext.data.DataProxy.addListener('exception', function (proxy, type, action, options, res) {
Ext.Msg.show({
title: 'ERROR',
msg: res.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var grid = new Ext.grid.GridPanel({
loadMask: true,
store: store,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
emptyMsg: "No records to display"
}),

columns: [
{ header: "CustomerID",
width: 170,
sortable: true,
dataIndex: 'CustomerID',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ header: "CompanyName",
width: 160,
sortable: true,
dataIndex: 'CompanyName',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ header: "ContactName",
width: 170,
sortable: true,
dataIndex: 'ContactName',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ header: "Address",
width: 170,
sortable: true,
dataIndex: 'Address',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ header: "City",
width: 170,
sortable: true,
dataIndex: 'City',
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],

plugins: [editor],
title: 'Customers DataGrid',
height: 500,
width: 900,
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Customer',
handler: function () {
var e = new Contact({
CustomerID: 'Name',
CompanyName: 'Address',
ContactName: 'City',
Address: 'PostalCode',
City: 'Country'
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
}, {
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Customer',
handler: function () {
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for (var i = 0, r; r = s[i]; i++) {
store.remove(r);
}
}
}, {
iconCls: 'icon-user-save',
text: 'Save All Modifications',
handler: function () {
store.save();
}
}]
});

grid.getSelectionModel().on('selectionchange', function (sm) {
grid.removeBtn.setDisabled(sm.getCount() < 1);
});


grid.render('crud-grid');


store.load({ params: { start: 0, limit: 25} });
//store.load();

}); // end of onReady

</script>

/*Controller Code*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExtJsDataGridMvcApp.Models;

namespace ExtJsDataGridMvcApp.Controllers
{
public class ContactController : Controller
{
static int startRowIndex = 0;
//
// GET: /Contact/

public ActionResult Index()
{
return View();
}


public JsonResult Load()
{
using (NorthwindEntities oDataContext = new NorthwindEntities())
{
//var result = oDataContext.Customers;
var orderData = (from item in oDataContext.Customers
select new Contact
{
CustomerID = item.CustomerID,
CompanyName = item.CompanyName,
ContactName = item.ContactName,
City = item.City,
Address = item.Address
}).ToList();
var result = orderData.Skip(10 * startRowIndex).Take(10);

var count = orderData.Count / 10;

startRowIndex++;

//if (startRowIndex > 10)
//{
// startRowIndex = 0;
//}

return Json(new
{
total = orderData.Count,
data = result,
}, JsonRequestBehavior.AllowGet);
}
}


[HttpPost]
public JsonResult Create(List<Contact> data)
{
//insert Create code
if (data.Count > 0)
{
using (NorthwindEntities oDataContext = new NorthwindEntities())
{
for (int count = 0; count < data.Count; count++)
{
//if ((!String.Equals(data[count].ShipName, "Name")) || (!String.Equals(data[count].ShipAddress, "Address")) || (!String.Equals(data[count].ShipCity, "City")) || (!String.Equals(data[count].ShipPostalCode, "PostalCode")) || (!String.Equals(data[count].ShipCountry, "Country")))
//{
Customer oNewCustomer = new Customer()
{
CustomerID = data[count].CustomerID.Trim(),
CompanyName = data[count].CompanyName.Trim(),
ContactName = data[count].ContactName.Trim(),
City = data[count].City.Trim(),
Address = data[count].Address.Trim()
};
oDataContext.AddToCustomers(oNewCustomer);
oDataContext.SaveChanges();
}
// }
}
}
this.Load();
return Json(new
{
data = new Contact(data[0].CustomerID, data[0].CompanyName, data[0].ContactName, data[0].City, data[0].Address),
success = true,
message = "Create method called successfully"
});

}

[HttpPost]
public JsonResult Update(List<Contact> data)
{
//insert Update code
if (data.Count > 0)
{
using (NorthwindEntities oDataContext = new NorthwindEntities())
{
for (int count = 0; count < data.Count; count++)
{
Customer oUpdateCustomer = new Customer();
oUpdateCustomer.CustomerID = data[count].CustomerID;
oDataContext.AddToCustomers(oUpdateCustomer);
oDataContext.AcceptAllChanges();
oUpdateCustomer.CompanyName = data[count].CompanyName;
oUpdateCustomer.ContactName = data[count].ContactName;
oUpdateCustomer.City = data[count].City;
oUpdateCustomer.Address = data[count].Address;
oDataContext.SaveChanges();
}
}
}
return Json(new
{
success = true,
message = "Update method called successfully"
});
}
[HttpPost]
public JsonResult Delete(List<string> data)
{
//insert Delete code
using (NorthwindEntities oDataContext = new NorthwindEntities())
{
var result = oDataContext.Customers;
var deleteCustomer = (from item in oDataContext.Customers.AsEnumerable()
where item.CustomerID == data[0]
select item).FirstOrDefault();
if (deleteCustomer != null)
{
oDataContext.DeleteObject(deleteCustomer);
oDataContext.SaveChanges();
}
}
return Json(new
{
success = true,
message = "Delete method called successfully"
});
}

[HttpPost]
public void Cancel(List<string> data)
{

}




}



}

when we click on the forward or backward button of paging toolbar it will call the load method automatically. Please help me to solve this problem

mitchellsimoens
6 Feb 2012, 8:18 AM
Ext JS 3 doesn't have a built-in MVC architecture, Ext JS 4 is the first Ext JS framework to have it.
Always wrap your code in [CODE] tags
Please post in the appropriate forum. I will move this to the Ext JS 3 Help forum as I see in your <script> tags you are using Ext JS 3

inboxmohit
6 Feb 2012, 11:23 PM
Please provide me source code. So , i can refer the source code and understand the aaplication.

Thanks
Mohit Sharma

dhiraj17
10 Apr 2012, 11:56 PM
Take a look at this link this might solve your problem

http://johnolamendy.wordpress.com/2012/02/22/grid-with-ajax-extjs-and-asp-net-mvc/

khmurach
11 Apr 2012, 2:33 AM
Did you fix it?