ExtJs 2.0 GridPanel+Struts2 with JSON plugin[更新代码]

extjs2.0发布了，功能有了很大提高，看了别人的extjs教程【http://203.93.254.59:8888/extdoc/html/index.html】，自己想把struts和spring框架的页面也用extjs来处理，就做了这个extjs+struts2+json plugin的例子，附件中有代码，不过没有包含库，请自行下载

struts2的json plugin的位置在：http://code.google.com/p/jsonplugin/
下载json plugin的jar包，放到/WEB-INF/lib/目录下就可以了

Spring + Struts + JPA的项目结构如其他例子中的一致
首先是web.xml

xml 代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>quickstart</display-name>
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>
            org.apache.struts2.dispatcher.FilterDispatcher
        </filter-class>
    </filter>
    <filter>
        <filter-name>jpaFilter</filter-name>
        <filter-class>
            org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter
        </filter-class>
        <init-param>
            <param-name>entityManagerFactory</param-name>
            <param-value>entityManagerFactory</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>jpaFilter</filter-name>
        <url-pattern>*.action</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <listener>
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
</web-app>

加入jpaFilter，是为了不让hibernate的session过早关闭，因为有的action会通过ajax动态调用。
下面是struts.xml，注意struts.xml需要放在源代码目录下面：

xml 代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <constant name="struts.objectFactory" value="spring" />
    <constant name="struts.devMode" value="true" />
    <constant name="struts.i18n.encoding" value="UTF-8"/>
    <package name="person" extends="json-default">
        <action name="list" method="execute" class="personaction">
            <result type="json"/>
        </action>
    </package>
</struts>

这里注意，struts.objectFactory告诉struts所有的action都到spring的上下文里面去找，另外还需要注意，我们自己的包要继承自json-default，这样才可以在result的type属性中使用json。
下面是spring的配置文件applicationContext.xml：

xml 代码

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="
    http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
    http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd
    http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd">
    <bean
        class="org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor" />
    <bean id="entityManagerFactory"
        class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <property name="jpaVendorAdapter">
            <bean
                class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">
                <property name="database" value="MYSQL" />
                <property name="showSql" value="true" />
            </bean>
        </property>
    </bean>
    <bean id="dataSource"
        class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost/extjs" />
        <property name="username" value="root" />
        <property name="password" value="" />
    </bean>


    <bean id="transactionManager"
        class="org.springframework.orm.jpa.JpaTransactionManager">
        <property name="entityManagerFactory"
            ref="entityManagerFactory" />
    </bean>
    <tx:annotation-driven transaction-manager="transactionManager" />
    <!--Service 开始 -->
    <bean id="personService" class="com.myext.service.impl.PersonServiceJpaImpl"/>
    <bean id="personaction" class="com.myext.action.PersonPageAction">
        <property name="person" ref="personService"/>
    </bean>
</beans>

这里的bean personaction和strutx.xml中的action class一致就可以了，下面是代码：
action：

java 代码

package com.myext.action;

import java.util.ArrayList;
import java.util.List;

import com.myext.service.PersonService;

public class PersonPageAction {
    private int limit=10;
    private int start=0;
    private PersonService person;
    private int total=0;
    private List persons = new ArrayList();
    private boolean success=true;
    public boolean getSuccess(){
        return this.success;
    }
    public void setLimit(int limit) {
        this.limit = limit;
    }

    public void setStart(int start) {
        this.start = start;
    }


    public void setPerson(PersonService person) {
        this.person = person;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List getPersons() {
        return persons;
    }

    public void setPersons(List persons) {
        this.persons = persons;
    }

    public String execute(){
        this.total = person.getTotal();
        this.persons = person.getPage(this.start, this.limit);
        return "success";
    }
}

service：

java 代码

package com.myext.service.impl;

import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.Query;

import com.myext.model.Person;
import com.myext.service.PersonService;

public class PersonServiceJpaImpl implements PersonService {
    private EntityManager em;
    private static String poname = Person.class.getName();
    @PersistenceContext
    public void setEntityManager(EntityManager em){
        this.em = em;
    }
    @SuppressWarnings("unchecked")
    @Override
    public List
     getPage(
    int start, int limit) {
        Query q = this.em.createQuery("from " + poname );
        q.setFirstResult(start);
        q.setMaxResults(limit);
        return q.getResultList();
    }
    @Override
    public int getTotal() {
        return this.em.createQuery("from " + poname).getResultList().size();
    }

}

页面的代码：

xml 代码

xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Grid3<!---->title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<!---->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"><!---->script>

<script type="text/javascript" src="extjs/ext-all.js"><!---->script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"><!---->script>
<!---->head>
<body>
    <script type="text/javascript" src="grid3.js"><!---->script>
    <div id="grid3" >
    <!---->div>
<!---->body>
<!---->html>

grid3.js代码

js 代码

/**
 * @author fox
 */
Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
    Ext.QuickTips.init();
    var sm = new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),   //行号列
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',renderer:function(value){
            if(value=='male'){
                return "男";
            }else{
                return "女";
            }
        }}, //增加性别，自定义renderer，即显示的样式，可以加html代码，来显示图片等。
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);


    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'list.action'}),//调用的动作
        reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            root: 'persons',
            successProperty :'success'
        }, [
            {name: 'id',mapping:'id',type:'int'},
            {name: 'sex',mapping:'sex',type:'string'},
            {name: 'name',mapping:'name',type:'string'},
            {name: 'descn',mapping:'descn',type:'string'} //列的映射
        ])
    });


    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        sm: sm,
        cm: cm,
        width:700,
        height:280,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }) //页脚显示分页
    });
    //el:指定html元素用于显示grid
    grid.render();//渲染表格
    ds.load({params:{start:0, limit:10}}); //加载数据
});

注意，这里的gridpanel一定要设置高度，否则数据是显示不出来的。
最后启动tomcat，在浏览器里输入http://localhost:8080/extjs/grid3.jsp,就可以看到效果

评论

5 楼 hanjiangit 2009-06-16  

楼主这什么垃圾玩意儿 带数据库就把sql拿出来嘛  你是挂教程呢 还是调胃口 浪费时间

4 楼 leonmy 2008-12-14  

正想 改进原界面，先参考了 ，谢谢。

3 楼 xuang131 2008-01-23  

我也想要我qq 25851830请看见后加我发我下谢谢

2 楼 CALM 2007-12-17  

能不能代码打个包？数据库sql什么的都没有很愁啊

1 楼 sss 2007-12-13  

[color=red][/color][size=18][/size]

[list=]

[/list]