ExtJs4 SpringMvc3 实现Grid 分页

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

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

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>zp.test</groupId>
    <artifactId>extjs</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>extjs Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.7</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
 
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
 
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>3.2.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>3.2.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>3.2.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>3.2.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.7.4</version>
        </dependency>
 
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>4.2.3.Final</version>
        </dependency>
 
        <dependency>
            <groupId>commons-pool</groupId>
            <artifactId>commons-pool</artifactId>
            <version>1.6</version>
        </dependency>
 
        <dependency>
            <groupId>c3p0</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.1</version>
        </dependency>
 
        <dependency>
            <groupId>commons-pool</groupId>
            <artifactId>commons-pool</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib-nodep</artifactId>
            <version>3.1</version>
        </dependency>
 
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.4</version>
        </dependency>
        <dependency>
            <groupId>javaee</groupId>
            <artifactId>javaee-api</artifactId>
            <version>5</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.18</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-lgpl</artifactId>
            <version>1.9.6</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.4</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.5</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-lgpl</artifactId>
            <version>1.9.6</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>1.7.1</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
        </plugins>
        <finalName>extjs</finalName>
    </build>
</project>

先从Extjs开始吧。

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

可以参考：

http://blog.csdn.net/ibcve/article/details/8498768

http://blog.csdn.net/yunji3344/article/details/8521791

项目首页创建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对应，名称什么的都是写着玩的。。。）

package zp.test.json;
 
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
 
import org.springframework.stereotype.Repository;
 
@Repository
@Entity
@Table(name="persion")
public class Persion {
    int id;
    String coursename;
    String name;
 
    @Id
    @Column(name="id")
    @GeneratedValue(strategy = GenerationType.AUTO)
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getCoursename() {
        return coursename;
    }
    public void setCoursename(String coursename) {
        this.coursename = coursename;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
 
}

DAO：

package zp.test.json;
 
import java.util.List;
 
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
 
@Component
public class PersionDao {
    @Autowired
    SessionFactory sessionFactory;
 
    public Session getSession(){
        return sessionFactory.getCurrentSession();
    }
    public List<Persion> findAll(){
        String hql=" from Persion";
        List<Persion> list=getSession().createQuery(hql).list();
        return list;
    }
 
    public void save(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 int count(){
        String hql3="select count(*) from Persion as p";
        Long res=(Long)getSession().createQuery(hql3).uniqueResult();
        int a=res.intValue();
        return a;
    }
 
    public List<Persion> findAll(String start,String limit){
        String hql2=" from Persion";
        Query query=getSession().createQuery(hql2);
        query.setFirstResult(Integer.parseInt(start));
        query.setMaxResults(Integer.parseInt(limit));
        return query.list();
    }
}

Service:

package zp.test.json;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
 
@Service
public class PersionService {
    @Autowired
    PersionDao persionDao;
  public List<Persion> getAllPersion(){
         List<Persion> list=persionDao.findAll();
         return list;
    }
    public List<Persion> getAllPersion(String start,String limit){
         List<Persion> list=persionDao.findAll(start,limit);
         return list;
    }
 
    public int getCount(){
        return persionDao.count();
    }
 
    //根据Extjs的请求参数获取分页数据
    public String getPagePersionJson(String start,String limit){
        List<Persion> list=this.getAllPersion(start, limit);
        return pageListToJson(list);
    }
 
    /**
     * 将获取的list数据转换成符合分页数据源格式的json串
     * items为extjs store proxy reader中设置的root，填充表格的数据；totalCount为数据总数。
     * @param list
     * @return
     */
    private String pageListToJson(List<Persion> list){
 
        JsonObject object=new JsonObject();
        Gson gson=new Gson();
        int count=this.getCount();
        JsonElement jsonElement=gson.toJsonTree(list);
        //items为extjs store proxy reader中设置的root，即为数据源；totalCount为数据总数。
        object.add("items", jsonElement);
        object.addProperty("totalCount", count);
        return object.toString();
    }
 
}

Controller:

package zp.test.json;
 
import java.io.IOException;
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
 
@Controller
public class PersionController {
 
    @Autowired
    PersionService persionService;
 
    /**
     * Extjs分页用的函数。start,limit 均为extjs grid传过来的请求参数。
     * @param request
     * @param response
     * @return
     */
    @RequestMapping("persionpage")
    @ResponseBody
    public String PersionPage(HttpServletRequest request,HttpServletResponse response){
        String start=request.getParameter("start");
        String limit=request.getParameter("limit");
        return persionService.getPagePersionJson(start, limit);
 
    }
 
}

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

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

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

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