新建一个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方法。
