ExtJS初级教程之ExtJS Grid(二)

        最近刚刚工作比较忙， ExtJS Grid的系列教程也没来的急写，今天我把ExtJS Grid的分页写写。   

     很多时候我们表格里显示的数据是从后台查询出来的海量数据，那么海量的数据显示在表格里用户的体验肯定会很差，效率也会很低。ExtJS为了解决这个问题，就给我们提供了一个非常强大的分页组件。今天我们就研究一下ExtJS的分页技术。

1、为表格添加分页组件

     要为表格添加分页组件，就要先创建Ext.PagingToolbar类的实例对象，然后将它添加到Panel中去。

gridPanel = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm:mm, bbar:new Ext.PagingToolbar({ pageSize:3, store:store, displayInfo:true, displayMsg:'显示记录 {0} - {1} of {2}', emptyMsg:"没有记录" }) });

PagingToolbar类的属性描述：

    pageSize：每页显示的记录条数。

    displayInfo：是否显示记录信息。

    displayMsg：该属性值为true时，该属性才有效。{0}：表示当前显示的记录起始数。{1}：表示显示记录数的结尾数。{2}：表示总共多少记录。

    emptyMsg：当没有记录的时候显示的文本信息。

2、从服务器端获得分页数据

       如果使用静态数据，Grid每次都会将所有数据显示。所以这里我们就编写一个Servlet来生成动态数据生成Grid。Servlet将接受两个请求数据start和limit。Start表示当前页显示记录的起始位置，limit表示每页显示的记录数。

public class GridServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=gbk"); PrintWriter out = response.getWriter(); String start = request.getParameter("start"); String limit = request.getParameter("limit"); int index = Integer.parseInt(start); int pageSize = Integer.parseInt(limit); int total = 100000; String jsonStr = "{total:" + total + ",root:["; for (int i = index; i < pageSize + index; i++) { int productIndex = i + 1; jsonStr += "{product_id:" + productIndex + ",product_name:'产品" + productIndex + "',product_price:'价格" + productIndex + "'}"; if (i != pageSize + index - 1) jsonStr += ","; } jsonStr += "]}"; out.println(jsonStr); } }

      要通过服务器来接收数据生成表格，就必须使用HttpProxy来制定URL。还有，服务器传递过来的数据是Json格式的，就不能使用ArrayReader了，需要使用的是JsonReader。

Ext.onReady(function(){ var mm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), mm, {header:'产品编号',dataIndex:'product_id'}, {header:'产品名称',dataIndex:'product_name'}, {header:'产品价格',dataIndex:'product_price'} ]); var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'../GridServlet'}), reader: new Ext.data.JsonReader({ totalProperty:'total', root:'root' },[ {name:'product_id'}, {name:'product_name'}, {name:'product_price'} ]) }); store.load({params:{start:0,limit:10}}); var gridPanel = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, sm:mm, bbar:new Ext.PagingToolbar({ pageSize:10, store:store, displayInfo:true, displayMsg:'显示记录 {0} - {1} of {2}', emptyMsg:"没有记录" }) }); });

      这样一个简单的ExtJS Grid分页就实现了。