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分页就实现了。