java extjs4 分页_ExtJs4 SpringMvc3 实现Grid 分页

新建一个Maven webapp项目，webxml以及spring配置没什么需要注意的，不再赘述。

Maven依赖：(个人习惯，有用没用的都加上。。。)

4.0.0

zp.test

extjs

war

0.0.1-SNAPSHOT

extjs Maven Webapp

http://maven.apache.org

junit

junit

4.7

test

jstl

jstl

1.2

taglibs

standard

1.1.2

org.springframework

spring-web

3.2.8.RELEASE

org.springframework

spring-webmvc

3.2.8.RELEASE

org.springframework

spring-aspects

3.2.8.RELEASE

org.springframework

spring-orm

3.2.8.RELEASE

org.aspectj

aspectjweaver

1.7.4

org.hibernate

hibernate-core

4.2.3.Final

commons-pool

commons-pool

1.6

c3p0

c3p0

0.9.1

commons-pool

commons-pool

1.6

cglib

cglib-nodep

3.1

commons-dbcp

commons-dbcp

1.4

javaee

javaee-api

5

mysql

mysql-connector-java

5.1.18

org.codehaus.jackson

jackson-core-lgpl

1.9.6

org.codehaus.jackson

jackson-core-asl

1.9.4

org.codehaus.jackson

jackson-mapper-asl

1.9.5

org.codehaus.jackson

jackson-mapper-lgpl

1.9.6

com.google.code.gson

gson

1.7.1

org.apache.maven.plugins

maven-compiler-plugin

1.6

1.6

extjs

先从Extjs开始吧。

用Sencha Architect在项目的部署路径(webapp)中建立一个extjs4项目，我这里是webapp/grid。

可以参考：

项目首页创建grid用的的js代码：

Ext.define('MyApp.view.MyViewport', {

extend:'Ext.container.Viewport',

initComponent:function() {var me = this;

Ext.applyIf(me, {

items: [

{

xtype:'gridpanel',

height:327,

id:'mygrid',

title:'My Grid Panel',

store:

'persionStore'

,

columns: [

{

xtype:'gridcolumn',

dataIndex:'id',

text:'ID'},

{

xtype:'gridcolumn',

dataIndex:'name',

text:'MyColumn1'},

{

xtype:'gridcolumn',

dataIndex:'coursename',

text:'MyColumn2'}

],

dockedItems: [

{

xtype:'pagingtoolbar',

dock:'bottom',

width:360,

displayInfo:true,

store:

'persionStore'

}

]

},

{

xtype:'textareafield',

height:33,

fieldLabel:'关键字',

labelWidth:60},

{

xtype:'button',

id:'btnfind',

text:'查找'},

{

xtype:'button',

id:'btndelete',

text:'删除'},

{

xtype:'button',

id:'btnadd',

text:'添加'}

]

});

me.callParent(arguments);

}

});

model：

Ext.define('MyApp.model.persionModel', {

extend:'Ext.data.Model',

fields: [

{

name:'id'},

{

name:'name'},

{

name:'coursename'}

]

});

store：

Ext.define('MyApp.store.persionStore', {

extend:'Ext.data.Store',

requires: ['MyApp.model.persionModel'],

constructor:function(cfg) {var me = this;

cfg= cfg ||{};

me.callParent([Ext.apply({

autoLoad:true,

autoSync:true,

model:'MyApp.model.persionModel',

storeId:'MyStore',

pageSize:

5

,

proxy: {

type:'ajax',

url:

'../persionpage.do'

,

reader: {

type:

'json'

,

root:

'items'

,

totalProperty:

'totalCount'

}

}

}, cfg)]);

}

});

pageSize：每页数据的数量

url：springMvc中controller的映射地址

type：设置数据源格式为json

root：要填充进表格的数据的json属性名

totalProperty：总条数的json属性名

Grid的填充原理就是根据Stor中的url获取json数据，再提取json中的值填充grid。

Extjs部分完成，下面来看后台

建立好项目的entity(要和extjs的model对应，名称什么的都是写着玩的。。。)

packagezp.test.json;importjavax.persistence.Column;importjavax.persistence.Entity;importjavax.persistence.GeneratedValue;importjavax.persistence.GenerationType;importjavax.persistence.Id;importjavax.persistence.Table;importorg.springframework.stereotype.Repository;

@Repository

@Entity

@Table(name="persion")public classPersion {intid;

String coursename;

String name;

@Id

@Column(name="id")

@GeneratedValue(strategy=GenerationType.AUTO)public intgetId() {returnid;

}public void setId(intid) {this.id =id;

}publicString getCoursename() {returncoursename;

}public voidsetCoursename(String coursename) {this.coursename =coursename;

}publicString getName() {returnname;

}public voidsetName(String name) {this.name =name;

}

}

DAO：

packagezp.test.json;importjava.util.List;importorg.hibernate.Query;importorg.hibernate.Session;importorg.hibernate.SessionFactory;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Component;

@Componentpublic classPersionDao {

@Autowired

SessionFactory sessionFactory;publicSession getSession(){returnsessionFactory.getCurrentSession();

}public ListfindAll(){

String hql=" from Persion";

List list=getSession().createQuery(hql).list();returnlist;

}public voidsave(Persion persion){

getSession().save(persion);

}//public User findByName(String username){//String hql="from Persion as u where u.username=?";//Query query=getSession().createQuery(hql);//query.setString(0, username);//User user=(User)query.uniqueResult();//return user;//}

public intcount(){

String hql3="select count(*) from Persion as p";

Long res=(Long)getSession().createQuery(hql3).uniqueResult();int a=res.intValue();returna;

}public ListfindAll(String start,String limit){

String hql2=" from Persion";

Query query=getSession().createQuery(hql2);

query.setFirstResult(Integer.parseInt(start));

query.setMaxResults(Integer.parseInt(limit));returnquery.list();

}

}

Service:

packagezp.test.json;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importcom.google.gson.Gson;importcom.google.gson.JsonArray;importcom.google.gson.JsonElement;importcom.google.gson.JsonObject;

@Servicepublic classPersionService {

@Autowired

PersionDao persionDao;public ListgetAllPersion(){

List list=persionDao.findAll();returnlist;

}public ListgetAllPersion(String start,String limit){

List list=persionDao.findAll(start,limit);returnlist;

}public intgetCount(){returnpersionDao.count();

}//根据Extjs的请求参数获取分页数据

publicString getPagePersionJson(String start,String limit){

List list=this.getAllPersion(start, limit);returnpageListToJson(list);

}/*** 将获取的list数据转换成符合分页数据源格式的json串

* items为extjs store proxy reader中设置的root，填充表格的数据；totalCount为数据总数。

*@paramlist

*@return

*/

private String pageListToJson(Listlist){

JsonObject object=newJsonObject();

Gson gson=newGson();int count=this.getCount();

JsonElement jsonElement=gson.toJsonTree(list);//items为extjs store proxy reader中设置的root，即为数据源；totalCount为数据总数。

object.add("items", jsonElement);

object.addProperty("totalCount", count);returnobject.toString();

}

}

Controller:

packagezp.test.json;importjava.io.IOException;importjava.util.List;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.stereotype.Service;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.ResponseBody;importcom.google.gson.Gson;importcom.google.gson.JsonElement;importcom.google.gson.JsonObject;importcom.google.gson.JsonParser;

@Controllerpublic classPersionController {

@Autowired

PersionService persionService;/*** Extjs分页用的函数。start,limit 均为extjs grid传过来的请求参数。

*@paramrequest

*@paramresponse

*@return

*/@RequestMapping("persionpage")

@ResponseBodypublicString PersionPage(HttpServletRequest request,HttpServletResponse response){

String start=request.getParameter("start");

String limit=request.getParameter("limit");returnpersionService.getPagePersionJson(start, limit);

}

}

controller 中@ResponseBody说明此controller不进行视图跳转，在这里的作用就是将数据库中的数据转换成Extjs需要的Json，让前端grid使用。

这时候就可以看出前面Extjs代码设置的root，totalProperty，url有什么用了。

url就是返回json的controller映射地址，totalProperty为数据总数，root就是纯粹的json格式的数据。

controller返回的不仅仅要有数据，还要有totalProperty。可以看看service中pageListToJson方法。