<%@ Page language= "C #" autoeventwireup= "true" codebehind= "GridShowTest.aspx.cs" inherits= "extpra.gridshowtest"% >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Display gird</title>
<link rel= "Stylesheet" type= "Text/css" href= "Extjs/resources/css/ext-all.css"/>
<script type= "Text/javascript" src= "Extjs/adapter/ext/ext-base.js" ></script>
<script type= "Text/javascript" src= "Extjs/ext-all.js" ></script>
<script type= "Text/javascript" src= "Extjs/build/locale/ext-lang-zh_cn.js" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<script type= "Text/javascript" >
function Ready ()
{
Ext.blank_image_url= "Extjs/docs/resources/s.gif"; Blank images are set locally, otherwise downloaded from the official web site by default (in networked environments)
var url= "Mygridjson.aspx?" Param=select ";
var sm=new Ext.grid.CheckboxSelectionModel ();//Check button
var cm=new Ext.grid.ColumnModel//Column template definition (This example defines the display of four columns in the database table employees)
([
sm,//adds a check button to the first column in each row,
New Ext.grid.RowNumberer ({header: Automatically show line number, width:100}),//Add columns that automatically display line numbers
{header: ' Employee Number ', Dataindex: ' EmployeeID ', Sortable:true, width:100},
{header: ' name ', Dataindex: ' LastName ', Sortable:true,width:100,editor:new Ext.form.TextField ()},
{header: ' Last Name ', Dataindex: ' FirstName ', Sortable:true,width:100,editor:new Ext.form.TextField ()},
{header: ' Date of birth ', Dataindex: ' Birthdate ', sortable:true,width:100,renderer:ext.util.format.daterenderer (' Y-year m-month d ')}/ /,renderer:ext.util.format.daterenderer (' Y year m month d ')
]);
Cm.defaultsortable=true; Set all columns to be sorted
var fields=//Field
[
{Name: "EmployeeID", Mapping: ' EmployeeID '},
{Name: "LastName", Mapping: ' LastName '},
{Name: "FirstName", Mapping: ' FirstName '},
{name: ' Birthdate ', mapping: ' Birthdate ', type: ' Date '}
];
Store is the data store and data exchange buffer in Ext in the grid and other controls to use the store as a fill of the data source
The Var store=new Ext.data.Store//jsonreader supports paging totalproperty the total number of records, Root is the JSON string returned from the server
({
Proxy:new Ext.data.HttpProxy ({url:url}),//proxy tell us where to get the data
Reader:new Ext.data.JsonReader//reader tells us how to parse data
({
Totalproperty: "TotalCount", Root: "Root",//totalcount
Fields:fields//fields tells us to read 4 data per row according to the defined specification, the first one is EmployeeID the second is LastName ...
//And Dataindex in Columnmodel, so Columnmodel knows that the column should show that data.
Remotesort:true//Support server-side sort Settings Store.remotesort = True, two parameter sort is submitted to the background, dir,sort sort field dir ascending or descending
}); The foreground sort is not supported at this time, otherwise just the foreground sort
Store.load ({Params:{start:0,limit:3}}); Initializing the data start indicates that the start page limit the size of each page, preferably in line with the pagesize in the paging toolbar
var pagingbar=new ext.pagingtoolbar//Paging toolbar
({
Displayinfo:true,
Emptymsg: "No data display",
Displaymsg: "Display from {0} data to {1} piece of data, total {2} piece of data",
Store:store,
Pagesize:3//Client simulation paging can be seen in the page bar with the number of pages calculated based on the pageSize and Total Records (PageCount) pagecount/pagesize
});
var grid=new Ext.grid.GridPanel
({
El: "Testgrid",
ID: "Menugrid",
Title: "Show List",
Autowidth:true,
Autoheight:true,
WIDTH:550,
HEIGHT:300,//Don't forget to set the height, otherwise the default height value is 0, can not display the read data
RenderTo:document.body,
Layout: "Fit",
Frame:true,
Border:true,
Autoscroll:true,
SM:SM,//gridpanel in the check button, you can select all the rows, if not set this property, then gridpanel the full selection function can not be implemented
CM:CM,
Store:store,
Viewconfig:{forcefit:true}, setting this property to true the column widths in the grid are not valid, and the grid calculates the proportions based on these values, assigning widths to the columns
Bbar:pagingbar
});
Grid.addlistener (' Sortchange ', sortchangefn); Add a ' sortchange ' event to the grid, and when a sort change event occurs, start the server-side sort (ie remotesort:true)
and reload data (that is, Store.reload ({Params:{start:0,limit:3}}))
function Sortchangefn (grid, Sortinfo)
{
Alert (' sort ' + Sortinfo.field + "direction" + sortinfo.direction);
Remotesort:true
Store.reload ({Params:{start:0,limit:3}}); Every time you store.reload, pass the sort to the background, dir dir automatically makes the corresponding changes every time it clicks from Desc->asc,asc->desc
}
}
Ext.onready (Ready);
</script>
<div id= "Testgrid" >
</div>
</div>
</form>
</body>
