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

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