ExtJS4学习笔记(五)---Grid分页
来源:互联网 发布:centos系统版本命令 编辑:程序博客网 时间:2024/05/16 17:36
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' }] });//创建Gridvar 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 = "" Thenstart = 0End IfIf limit = "" Thenlimit = 50End Ifsorts = 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 = countsEnd IfEcho("{")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 IfNextEcho("]}")Function Echo(str) Response.Write(str)End Function%>
最后,来张效果图:
- ExtJS4学习笔记(五)---Grid分页
- ExtJS4学习笔记(五)---Grid分页
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- Extjs4开发笔记(五)——动态grid
- Extjs4---grid+servlet分页查询
- Extjs4---Grid表格分页处理
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4学习笔记十--Grid使用
- ExtJS4学习笔记十--Grid使用
- ExtJS4学习笔记(一)---window的创建
- ExtJS4学习笔记(二)---HBox的使用
- 在myEclipse下使用resin不能正常发布工程的解决
- ExtJS4学习笔记(三)---VBox布局的使用
- ExtJS4学习笔记(四)---Grid的使用
- ExtJS4学习笔记(五)---Grid分页
- SQLSERVER约束
- ExtJS4学习笔记(六)---多表头Grid
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4学习笔记(八)---Grid多选/全选
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
- ExtJS4学习笔记(十一)---TabPanel
- ExtJS4学习笔记(十二)---选项卡(tabs)