ExtJS4学习笔记(五)---Grid分页

最新推荐文章于 2021-02-24 00:08:26 发布

sandykwx

最新推荐文章于 2021-02-24 00:08:26 发布

阅读量361

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

Grid组件，当数据量很大的时候，就需要分页显示，本文介绍如何实现Extjs4 Grid的分页功能。

先看THML代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paging Grid-MHZG.NET</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="paing.js"></script>
</head>

<body>
<div id="demo"></div>
</body>
</html>

这里引用的JS文件，都是相对于Extjs4整个目录的。如果已经将JS和CSS文件剥离并分目录放置了，那么一定要注意修改bootstrap.js。

JS代码：

Ext.require([
    'Ext.grid.*',
	'Ext.toolbar.Paging',
    'Ext.data.*'
]);

Ext.onReady(function(){
    Ext.define('MyData',{
	    extend: 'Ext.data.Model',
		fields: [
			'title','author',
		    //第一个字段需要指定mapping，其他字段，可以省略掉。
		    {name:'hits',type: 'int'},
			 'addtime'
		]
	});
	
	//创建数据源
	var store = Ext.create('Ext.data.Store', {
		//分页大小
		pageSize: 50,
        model: 'MyData',
		//是否在服务端排序
		remoteSort: true,
        proxy: {
           //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
            type: 'ajax',
            url: 'mydata.asp',
            
            reader: {
                root: 'items',
                totalProperty  : 'total'
            },
			simpleSortMode: true
        },
        sorters: [{
			//排序字段。
            property: 'hits',
			//排序类型，默认为 ASC
            direction: 'DESC'
        }]
    });
	
	//创建Grid
	var grid = Ext.create('Ext.grid.Panel',{
	    store: store,
		columns: [
            {text: "标题", width: 120, dataIndex: 'title', sortable: true},
            {text: "作者", flex: 200, dataIndex: 'author', sortable: false},
            {text: "点击数", width: 100, dataIndex: 'hits', sortable: true},
            {text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
        ],
		height:400,
		width:520,
		x:20,
		y:40,
		title: 'ExtJS4 Grid 分页示例',
		disableSelection: true,
        loadMask: true,
        renderTo: 'demo',
        viewConfig: {
			id: 'gv',
			trackOver: false,
            stripeRows: false
        },
		
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据"
        })
	})
	store.loadPage(1);
})

关于数据，任何服务端都可以，只要返回相应的数据就可以了。这里简单使用ASP代码做了一些测试用的数据，但是这些测试代码包含了参数接收、基本判断以及分页方法。具体情况具体实施，这些代码只作为抛砖引玉的作用。

ASP代码：

<%
	Response.ContentType = "text/html"
	Response.Charset = "UTF-8"
%>
<%
'返回JSON数据,自定义一些测试数据。。
'这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
'由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
start = Request("start")
limit = Request("limit")
If start = "" Then
	start = 0
End If
If limit = "" Then
	limit = 50
End If
sorts = Replace(Trim(Request.Form("sort")),"'","") 
dir = Replace(Trim(Request.Form("dir")),"'","")

Dim counts:counts=300
'注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

Dim Ls:Ls = Cint(start) + Cint(limit)
If Ls >= counts Then
   Ls = counts
End If

Echo("{")
Echo("""total"":")
Echo(""""&counts&""",")
Echo("""items"":[")
For i = start+1 To Ls
   Echo("{")
   Echo("""title"":""newstitle"&i&"""")
   Echo(",")
   Echo("""author"":""author"&i&"""")
   Echo(",")
   Echo("""hits"":"""&i&"""")
   Echo(",")
   Echo("""addtime"":"""&Now()&"""")
   Echo("}")
   If i<Ls Then
     Echo(",")
   End If
Next
Echo("]}")
Function Echo(str)
   Response.Write(str)
End Function
%>

最后，来张效果图：

sandykwx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4学习笔记(五)---Grid分页

Grid组件，当数据量很大的时候，就需要分页显示，本文介绍如何实现Extjs4 Grid的分页功能。先看THML代码: Paging Grid-MHZG.NET这里引用的JS文件，都是相对于Extjs4整个目录的。如果已经将JS和CSS文件剥离并分目录放置了，那么一定要注意修改bootstrap
复制链接

扫一扫

专栏目录