Ext_Js分页示例代码详解

ExtJs分页显示示例原理详解前几天我们项目组讨论给**公司关于**产品做一个功能展示的用例。讨论到view层时，用那种框架。最终选中了大名鼎鼎的EXTJS框架来做view。这里的view涉及的不是很复杂。因为它仅仅是个Demo。最常用的就是分页显示数据了。目前extjs仅仅支持xml和json两种格式的数据展现。就性能而言。Extjs不可能用于较大的项目。性能确实不敢恭维。这里我们仅仅简单的介绍一下它的分页原理。其实他的源码中提供了大量的例子。可以参考一下。该例子就是基于它的官方例子实现的。目前，市场是比较流行的数据关于extjs就是“深入浅出extjs“了，该书编写的却是不怎么样。如果想学习extjs，最好研究研究它的源码的例子就行了。Jar包如下：其中json-lib-2.2.1-jdk1.5.jarxstream-1.3.jar是转换集合类型转换json类型的主要jar包。测试工程的包路径如下：该示例是用strus2做的mvc。action类：packageaction;importbean.Bean;importcom.opensymphony.xwork2.ActionSupport;importjava.util.ArrayList;importjava.util.List;importjavax.servlet.http.*;importorg.apache.commons.logging.Log;importorg.apache.commons.logging.LogFactory;importorg.apache.struts2.ServletActionContext;importutil.ExtHelper;publicclassDisplayActionextendsActionSupport{privatestaticfinalLoglog=LogFactory.getLog(DisplayAction.class);privatestaticfinallongserialVersionUID=1L;privateHttpServletResponseresponse;privateHttpServletRequestrequest;privateintstart;privateintlimit;//表示数据库中数据总条数，用户分页显示privatestaticfinallongtotalResult=100;publicStringdisplay()throwsException{Listlist=newArrayList();for(inti=0;i5;i++){bean.Beanbean=newBean();bean.setId(i);bean.setDetail(detil+i);bean.setTitle(title+i);list.add(bean);}Stringjson=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);returnnull;}}Po类：packagebean;publicclassBean{privateintid;privateStringtitle;privateStringdetail;publicintgetId(){returnid;}publicvoidsetId(intid){this.id=id;}publicStringgetTitle(){returntitle;}publicvoidsetTitle(Stringtitle){this.title=title;}publicStringgetDetail(){returndetail;}publicvoidsetDetail(Stringdetail){this.detail=detail;}}ExtHelper类：packageutil;importjava.util.ArrayList;importjava.util.List;importnet.sf.json.JSONObject;importcom.thoughtworks.xstream.XStream;importcom.thoughtworks.xstream.io.xml.DomDriver;publicclassExtHelper{/***list转换成xml*/publicstaticStringgetXmlFromList(longrecordTotal,ListbeanList){Totaltotal=newTotal();total.setResults(recordTotal);Listresultlist=newArrayList();resultlist.add(total);resultlist.addAll(beanList);XStreamsm=newXStream(newDomDriver());for(inti=0;iresultlist.size();i++){Classc=resultlist.get(i).getClass();Stringb=c.getName();String[]temp=b.split(\\.);sm.alias(temp[temp.length-1],c);}Stringxml=?xmlversion=\1.0\encoding=\utf-8\?\n+sm.toXML(resultlist);System.out.println(**********************************+xml);returnxml;}/***list转换成json*/publicstaticStringgetJsonFromList(longrecordTotal,ListListbeanList){TotalJsontotal=newTotalJson();total.setResults(recordTotal);total.setItems(ListbeanList);JSONObjectJsonObject=JSONObject.fromObject(total);returnJsonObject.toString();}}TotalJson类：packageutil;importjava.util.List;publicclassTotalJson{privatelongresults;privateListitems;publicListgetItems(){returnitems;}publicvoidsetItems(Listitems){this.items=items;}publiclonggetResults(){returnresults;}publicvoidsetResults(longresults){this.results=results;}}Struts.xml!DOCTYPEstrutsPUBLIC'-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN''=struts.i18n.encodingvalue=UTF-8/packagename=ext_fenyeextends=struts-defaultactionname=getDataListclass=action.DisplayActionmethod=display/action/package/strutsJSP:%@pagelanguage=javacontentType=text/html;charset=UTF-8pageEncoding=UTF-8%htmlheadtitleExtJs-FenYe/titlelinkrel=stylesheettype=text/csshref=${pageContext.request.contextPath}/pagesExt/ext-2.2.1/resources/css/ext-all.css/linkrel=stylesheettype=text/csshref=${pageContext.request.contextPath}/pagesExt/css/style.css/scripttype=text/javascriptsrc=${pageContext.request.contextPath}/pagesExt/ext-2.2.1/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=${pageContext.request.contextPath}/pagesExt/ext-2.2.1/ext-all.js/scriptscripttype=text/javascriptsrc=${pageContext.request.contextPath}/pagesExt/ext-2.2.1/ext-all-debug.js/script/headscripttype=text/javascriptExt.onReady(function(){//定义数据集对象vartypeStore=newExt.data.Store({//配置分组数据集autoLoad:{params:{start:0,limit:6}},//默认加载参数：start=0，limit=6reader:newExt.data.JsonReader({totalProperty:results,root:items,//和action的list的名称一致。id:id},Ext.data.Record.create([//对一个po的属性名称{name:'id'},{name:'title'},{name:'detail'}])),proxy:newExt.data.HttpProxy({//URL:struts.xml中配置该actionurl:'getDataList.action'})})//分页工具栏varpagingBar=newExt.PagingToolbar({//分页工具栏store:typeStore,pageSize:6,//每页显示的条数。用于系统自动计算它的start值displayInfo:true,displayMsg:'数据从第{0}条-第{1}条共{2}条数据',emptyMsg:没有记录})//创建Grid表格组件varcb=newExt.grid.CheckboxSelectionModel()varbookTypeGrid=newExt.grid.GridPanel({applyTo:'grid-div',//定位到id=“grid-div”frame:true,store:typeStore,//与前面定义的数据存储器名称一致width:580,height:400,viewConfig:{autoFill:false},sm:cb,columns:[//配置表格列newExt.grid.RowNumberer({header:'行号',width:50}),//表格行号组件cb,{header:编号,width:50,dataIndex:'id',sortabl