extjs分页

前几天我们项目组讨论给**公司关于**产品做一个功能展示的用例。讨论到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>