Hi,
Please see my sample below.
Controller
public class GridController : Controller
{
//
// GET: /Grid/
public ActionResult Index()
{
return View();
}
public StoreResult GetData(int start, int limit, int page, string filters)
{
StoreResult response = new StoreResult();
List<User> data = new List<User>();
Random randow = new Random();
DateTime now = DateTime.Now;
for (int i = start + 1; i <= start + limit; i++)
{
User user = new User()
{
Firstname = "User " + i,
Lastname = "User Last " + i,
};
data.Add(user);
}
response.Data = data;
response.Total = 3000;
return response;
}
}
public class User
{
public String Firstname { get; set; }
public String Lastname { get; set; }
}
JS
GridView = {
InitializeView: function () {
GridView.ReconfigureGrid();
},
ReconfigureGrid: function () {
var columns = [{ text: 'First Name', dataIndex: 'Firstname' }, { text: 'Last Name', dataIndex: 'Lastname'}];
var fields = [{ name: 'Firstname', type: 'string' }, { name: 'Lastname', type: 'string'}];
var grid = App.gridPanelGridView;
var store = grid.store;
var oldStore = store;
store.removeAll();
store = GridView.CreateStore(fields);
grid.reconfigure(store, columns);
GridView.SetGridFilters(fields, columns);
store.loadPage(1);
oldStore.destroy();
},
CreateStore: function (fields) {
return Ext.create('Ext.data.JsonStore', {
remoteSort: true,
remoteFilter: true,
buffered: true,
fields: fields,
autoLoad: false,
pageSize: 500,
showWarningOnFailure: true,
proxy: {
type: "ajax",
url: "/Grid/GetData",
reader: {
root: "data",
type: "json",
totalProperty: 'total'
},
listeners: {
exception: { fn: function (el, response, operation, eOpts) {
alert(response.text);
}
}//end exception
}
},
listeners: {
}
});
},
SetGridFilters: function (fields, columns) {
App.gridPanelGridView.filters.clearFilters();
for (var i = 0; i < columns.length; i++) {
for (var j = 0; j < fields.length; j++) {
if (columns[i].dataIndex == fields[j].name) {
App.gridPanelGridView.filters.addFilter({ dataIndex: columns[i].dataIndex, type: fields[j].type });
break;
}
}
}
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<%-- Override the default label seperator and set to ""--%>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.Component.prototype.labelSeparator = "";
</script>
<script src="/Scripts/GridView.js" type="text/javascript"></script>
<style type="text/css">
.Header
{
font: 12px helvetica,arial,sans-serif;
}
.list-over
{
background-color: white;
}
.my-listview .x-list-body dt
{
white-space: normal;
cursor: arrow;
}
</style>
<script type="text/javascript">
var formatDate = function (v) {
return value.format(Common.GetJSDateFormat());
};
</script>
</head>
<body>
<ext:ResourceManager runat="server">
<Listeners>
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="FitLayout" IDMode="Static">
<Items>
<ext:GridPanel ID="gridPanelGridView" runat="server" Region="Center">
<TopBar>
</TopBar>
<SelectionModel>
<ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
</SelectionModel>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
</Columns>
<Listeners>
</Listeners>
</ColumnModel>
<Store>
<ext:Store runat="server" Buffered="true" PageSize="5">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="dummy" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Features>
<ext:GridFilters runat="server" ID="gridFiltersGridView" Local="false" MenuFilterText="temp"
AutoDataBind="true">
<Filters>
<ext:BooleanFilter />
</Filters>
</ext:GridFilters>
</Features>
<Listeners>
<CellDblClick Fn="" />
<ContainerContextMenu Fn="" />
<ViewReady Handler="GridView.InitializeView();" />
</Listeners>
</ext:GridPanel>
</Items>
<Listeners>
<Render />
</Listeners>
</ext:Viewport>
</body>
</html>
Originally Posted by RCM
