extjs中如何创建一个带分页功能的Ext.grid.GridPanel

最新推荐文章于 2021-02-23 12:23:49 发布

KingViker

最新推荐文章于 2021-02-23 12:23:49 发布

阅读量6.2k

点赞数

分类专栏： ext 文章标签： extjs books sql url

本文链接：https://blog.csdn.net/kingviker/article/details/6435423

版权

ext 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

// 首先创建一个Ext.data.JsonReader用于解析数据
// 假设数据为：{"message":"0","totalCount":"2","books":[{"id":"001","name":"语文","useless":"不需要用到的信息"},
// {"id":"002","name":"数学","useless":"不需要你"}]}

// 下面是Reader的代码
var bookReader = new Ext.data.JsonReader({
totalProperty : "totalCount", // 数据记录总数,分页需要
root : "books" // 数据记录数组节点
},

// 每条记录的具体解析方式，id映射(mapping)数据中的id，name映射数据中的name
[{
name : 'id',
mapping : 'id'
}, {
name : 'name',
mapping : 'name'
}])

// 然后创建Ext.data.Store，这个是GridPanel的数据提供者
var store = new Ext.data.Store({
// listBook.do是一个http请求，此请求返回前面假设的数据
url : 'listBook.do',
reader : bookReader
});

// 如果有需要可以自动加载数据
// store.load();

// 接着创建GridPanel的选择模式和列模式(展现的列)
// 选择模式
var sm = new Ext.grid.CheckboxSelectionModel();

// 列模式
var cm = new Ext.grid.ColumnModel(
[
// 自动序号
new Ext.grid.RowNumberer(),
sm,
{
// 列名ID，数据对应store的id
header : "ID",
dataIndex : "id",
width : 120,
// 是否自动隐藏，这里的隐藏的列用户可以手动控制是否显示
//hidden : true
}, {
// 书名，数据对应store的name
header : "书名",
dataIndex : 'name',
width : 80
}]);

// 最后就是创建Ext.grid.GridPanel了
var bookGrid = new Ext.grid.GridPanel({
// 定义Grid在页面中的唯一标识，这样可以随时通过Ext.getCmp("book_gird")来获得此gird
id : "book_grid",
// 设定grid带有行边框
stripeRows : true,
// 前面定义的store
store : store,
// 前面定义列模式
cm : cm,
// tbar : {} 表标头选项
// 表底部加入一个分页查询bar
bbar : new Ext.PagingToolbar({
id : 'bookGrid-paging-toolbar',
pageSize : 25, // 一页显示25行
store : store, // 前面定义的store
displayInfo : true, // 是否显示总体信息
displayMsg : "第 {0} - {1} 条共 {2} 条",
emptyMsg : "没有符合条件的记录"
}),
sm : sm,
width : 1075,
height : 800,
frame : true,
title : "书本列表",
//iconCls : 'book'
});

说明: PagingToolbar在做翻页操作时会自动提交start和limit两个参数,我们只需在后台用
request.getParameter("start")和request.getParameter("limit")获取出来并传入sql查询就行了