The main issue of this post is to show how to use EXT JS Grids, and how to use a backend that feeds them. The backend is developed in C# using ASP.NET MVC, but could be virtualy any source that could effectively generate a JSON stream.
First, have a look at our C# JSON Generator. We have to remember that we must give the View two elements: The total number of elements to display and the data in a List.
First, have a look at our C# JSON Generator. We have to remember that we must give the View two elements: The total number of elements to display and the data in a List.
<%@ Page Language="C#" %>
<%@ Import Namespace="iPrimeCRM.Models" %>
{"totalCount" : <%= Html.Encode((int)ViewData["total"]) %>,
"data" :[
<% for (int i = 0; i < ((List < Case>)ViewData["list"]).Count; i++ )
{%>
<%if (i > 0){%>
,
<% }%>
{
<%Case case= (List < Case>)ViewData["list"]).ElementAt(i);%>
"Id" : <%=case.CASEID%>,
"Name" : "<%=Html.Encode(case.NAME)%>",
"Type" : "<%=Html.Encode(case.TYPE)%>",
"Priority" : "<%=Html.Encode(case.PRIORITY)%>"
}
<%} %>
]
}
You must change just the part where the fields per row are set, remembering that each object on the List must be converted to its JSON representation:
"Field Name" : "Value"
"Field Name" : 34 // if it is an integer
We must obtain something like this (without the indentation)
{
"totalCount" : 1,
"data": [
{
"Id" : 1,
"Name" : "Saint Andrews School",
"Type" : "Schools and Universities",
"Priority" : "High"
}
]
}
To check if our JSON stream is OK, we could use an online tool called JSONLint on www.jsonlint.com which validates the result.
(This could be done with PHP, Java, Python or any Language... that's the great thing about this).
Now we have the HTML content and javascript code that will consume this JSON stream to show a Grid. Remember to include the ExtJS scripts before.
<script type="text/javascript" language="javascript">
Ext.onReady(function() {
var casesGridReader = new Ext.data.JsonReader({ root: 'data',
totalProperty: 'totalCount'
},
[
{ name: 'Id' },
{ name: 'Name' },
{ name: 'Type' },
{ name: 'Priority' }
]);
var casesDataProxy = new Ext.data.HttpProxy({
url: '../../ServiceCase/ListCasesJSON'
});
var casesDataStore = new Ext.data.Store({
proxy: casesDataProxy,
remoteSort: true,
reader: casesGridReader
});
casesDataStore.load({ params: { start: 0, limit: 10} });
var casesPagingBar = new Ext.PagingToolbar({
pageSize: 2,
store: casesDataStore,
displayInfo: true,
displayMsg: 'Showing Cases {0} - {1} from {2}'
});
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var casesGrid = new Ext.grid.GridPanel({
store: casesDataStore,
columns: [
checkBoxSelMod,
{
header: '# Case',
dataIndex: 'Id',
width: 50
}, {
header: 'Name',
dataIndex: 'Name',
width: 150
}, {
header: 'Type',
dataIndex: 'Type',
width: 90
}, {
header: 'Priority',
dataIndex: 'Priority',
width: 80
}
],
bbar: casesPagingBar,
renderTo: 'gridDiv',
width: 700,
autoHeight: true,
loadMask: true,
selModel: checkBoxSelMod,
frame: false
});
</script>
Remember that:
Many thanks to Marita Arce for writing the original Spanish version.
- Limit : 10 means that the grid thinks it will receive 10 or less elements in the JSON stream, it does it to calculate the number of pages it will show. The pagination should be done on server side.
- We should include a DIV called "gridDiv" where the Grid will be rendered.
- If anything fails remember you could check JSON streams on JSONLint.
Many thanks to Marita Arce for writing the original Spanish version.
No comments:
Post a Comment