extjs分页

来源：互联网发布：王者荣耀unity源码编辑：程序博客网时间：2024/04/27 15:59

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

</package>

</struts>

JSP:

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

<html>

<head>

<title>ExtJs-FenYe</title>

</head>

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>

</body>

</html>