.NET之 Extjs4.0 Grid分页显示
昨天完成了 J2EE的 EXTJS Grid分页,今天研究了下.NET下的 Extjs Grid分页 ,
最大的区别是 分页语句不同 ,别的都大同小异:
上代码:
search.aspx:
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>
<!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 runat="server">
<title>Search</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js" ></script>
<script type="text/javascript" src="extjs/ext-all.js" ></script>
<script type="text/javascript" >
//预加载
Ext.require(
[
'Ext.grid.*',
'Ext.易做图.Paging',
'Ext.data.*'
]
);
Ext.onReady(
function(){
//创建Model
Ext.define(
'User',
{
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'date',mapping:'date'},
{name:'origin',mapping:'origin'}
]
}
)
//创建数据源
var store = Ext.create(
'Ext.data.Store',
{
model:'User',
//设置分页大小
pageSize:5,
proxy: {
type: 'ajax',
url : 'PageJson.aspx',
reader: {
//数据格式为json
type: 'json',
root: 'bugs',
//获取数据总数
totalProperty: 'totalCount'
}
},
autoLoad:true
}
);
//创建grid
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[
{text:'ID',width:120,dataIndex:'id',sortable:true},
{text:'姓名',width:120,dataIndex:'name',sortable:true},
{text:'性别',width:120,dataIndex:'date',sortable:true},
{text:'年龄',width:120,dataIndex:'origin',sortable:true}
],
height:200,
width:480,
x:20,
y:40,