您的位置：首页 > Web前端 > JavaScript

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

2011-05-20 19:49 766 查看

// 首先创建一个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查询就行了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extjs books sql url

相关文章推荐

新的分享

章节导航