Ext Js分页显示示例原理详解

前几天我们项目组讨论给**公司关于**产品做一个功能展示的用例。讨论到view层时，用那种框架。最终选中了大名鼎鼎的EXT JS 框架来做view。这里的view涉及的不是很复杂。因为它仅仅是个Demo。最常用的就是分页显示数据了。目前extjs仅仅支持xml和json两种格式的数据展现。就性能而言。Extjs不可能用于较大的项目。性能确实不敢恭维。这里我们仅仅简单的介绍一下它的分页原理。其实他的源码中提供了大量的例子。可以参考一下。该例子就是基于它的官方例子实现的。目前，市场是比较流行的数据关于extjs就是“深入浅出extjs“了，该书编写的却是不怎么样。如果想学习extjs，最好研究研究它的源码的例子就行了。

 

Jar包如下：

 

 

 

其中json-lib-2.2.1-jdk1.5.jar xstream-1.3.jar是转换集合类型转换json类型的主要jar包。

测试工程的包路径如下：

 

 

 

该示例是用strus2做的mvc。

action类：

 

 

package action;

import bean.Bean;

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.*;

import org.apache.commons.logging.Log;

import org.apache.commons.logging.LogFactory;

import org.apache.struts2.ServletActionContext;

import util.ExtHelper;

 

 

 

public class DisplayAction extends ActionSupport

{

    private static final Log log=LogFactory.getLog(DisplayAction.class);

    private static final long serialVersionUID = 1L;

    private HttpServletResponse response;

    private HttpServletRequest request;

    private int start;

    private int limit;

//表示数据库中数据总条数，用户分页显示

    private static final long totalResult=100;

   

   

    public String display() throws Exception

    {

       List list=new ArrayList();

       for(int i=0;i<5;i++){

        bean.Bean bean=new Bean();

        bean.setId(i);

        bean.setDetail("detil"+i);

        bean.setTitle("title"+i);

        list.add(bean);

       }

 

       String json = ExtHelper.getJsonFromList(totalResult,list);

       log.info("list转换成json格式的数据开始");

       log.info(json);

       response = ServletActionContext.getResponse();

       response.setContentType("application/xml;charset=UTF-8");

       response.getWriter().write(json);

 

       return null;

    }

}

Po类：

package bean;

 

public class Bean {

    private int id;

    private String title;

    private String detail;

   

    public int getId() {

       return id;

    }

    public void setId(int id) {

       this.id = id;

    }

    public String getTitle() {

       return title;

    }

    public void setTitle(String title) {

       this.title = title;

    }

    public String getDetail() {

       return detail;

    }

    public void setDetail(String detail) {

       this.detail = detail;

    }

}

ExtHelper类：

package util;

import java.util.ArrayList;

import java.util.List;

import net.sf.json.JSONObject;

import com.thoughtworks.xstream.XStream;

import com.thoughtworks.xstream.io.xml.DomDriver;

public class ExtHelper {

/**

*list转换成xml

*/

    public static String getXmlFromList(long recordTotal , List beanList) {

       Total total = new Total();

       total.setResults(recordTotal);

       List resultlist = new ArrayList();

       resultlist.add(total);

       resultlist.addAll(beanList);

       XStream sm = new XStream(new DomDriver());

       for (int i = 0; i < resultlist.size(); i++) {

           Class c = resultlist.get(i).getClass();

           String b = c.getName();

           String[] temp = b.split("\\.");

           sm.alias(temp[temp.length - 1], c);

       }

       String xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + sm.toXML(resultlist);

       System.out.println("**********************************"+xml);

       return xml;

    }

 

   

 

/**

*list转换成json

*/

 

    public static String getJsonFromList(long recordTotal , List ListbeanList){

       TotalJson total = new TotalJson();

       total.setResults(recordTotal);

       total.setItems(ListbeanList);

       JSONObject JsonObject = JSONObject.fromObject(total);

       return JsonObject.toString();

    }

 

}

 

TotalJson类：

package util;

import java.util.List;

public class TotalJson {

    private long results;

    private List items;

    public List getItems() {

       return items;

    }

    public void setItems(List items) {

       this.items = items;

    }

    public long getResults() {

       return results;

    }

    public void setResults(long results) {

       this.results = results;

    }

}

Struts.xml

<!DOCTYPE struts PUBLIC '-//Apache Software Foundation//DTD Struts Configuration 2.0//EN'  

   'http://struts.apache.org/dtds/struts-2.0.dtd'> 

    <struts>  

    <constant name="struts.i18n.encoding" value="UTF-8"/>

  <package name="ext_fenye" extends="struts-default">

           <action name="getDataList" class="action.DisplayAction" method="display"></action>

     </package> 

  </struts>  

JSP:

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

<html>

<head>

<title>ExtJs-FenYe</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/pagesExt/ext-2.2.1/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/pagesExt/css/style.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/pagesExt/ext-2.2.1/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/pagesExt/ext-2.2.1/ext-all.js"></script>

<script type="text/javascript" src=""${pageContext.request.contextPath}/pagesExt/ext-2.2.1/ext-all-debug.js"> </script>

</head>

 

<script type="text/javascript">

    Ext.onReady(function(){

       //定义数据集对象

       var typeStore = new Ext.data.Store({//配置分组数据集

           autoLoad :{params : {start:0,limit : 6}},

//默认加载参数：start=0，limit=6

           reader: new Ext.data.JsonReader({

              totalProperty: "results",

              root: "items",//和action的list的名称一致。

              id: "id"

           },

           Ext.data.Record.create([

//对一个po的属性名称

              {name: 'id'},

              {name: 'title'},

              {name: 'detail'}

           ])

           ),

           proxy : new Ext.data.HttpProxy({

//URL:struts.xml中配置该action

              url : 'getDataList.action'

           })

       })

   

 

           //分页工具栏

          

           var pagingBar = new Ext.PagingToolbar({//分页工具栏

              store : typeStore,

              pageSize :6,//每页显示的条数。用于系统自动计算它的start值

              displayInfo : true,

              displayMsg :  '数据从第{0}条 - 第{1} 条 共 {2}条数据',

              emptyMsg : "没有记录"

           })

      

       //创建Grid表格组件

       var cb = new Ext.grid.CheckboxSelectionModel()

       var bookTypeGrid = new Ext.grid.GridPanel({

           applyTo : 'grid-div',//定位到id=“grid-div”

           frame:true,

           store: typeStore,//与前面定义的数据存储器名称一致

           width:580,

           height:400,

           viewConfig : {

              autoFill : false

           },

           sm:cb,

           columns: [//配置表格列

              new Ext.grid.RowNumberer({

                  header : '行号',

                  width : 50

               }),//表格行号组件

              cb,

              {header: "编号", width: 50, dataIndex: 'id', sortable: true},

              {header: "名称", width: 150, dataIndex: 'title', sortable: true},

              {header: "说明", width: 250, dataIndex: 'detail', sortable: true}

           ],

           //分页工具栏

         bbar: pagingBar//分页引用，作为button。前面有定义

       })

      

      

      

    });

</script>

<body>

<div id='grid-div'/>

</body>

</html>