`
endual
  • 浏览: 3545309 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs---extjs整合struts2

 
阅读更多

从一看见extjs,我就喜欢上他的样子,于是,现在又上手做了,这次应该会更加深入的理解extjs吧。

 

extjs 整合 struts2:

要导入的包很重要,很多demo就是没有说清楚这个,导致无法安装他们的博文进行演示。

 


 

那么接下去,就简单了。

struts.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.enable.DynamicMethodInvocation"
		value="false" />
	<constant name="struts.devMode" value="false" />

	<package name="default" extends="json-default" namespace="/">
		<action name="gridUtil" class="org.lee.GridUtil">
			<result type="json" name="success"/>
		</action>
	</package>

	<!--
		<include file="example.xml"/>
		Add packages here -->

</struts>
 

 

   page.jsp

 

   <%@ page language="java" contentType="text/html; charset=GBK" 

    pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
     
     <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> 
    <!-- ENDLIBS --> 
 
   <script type="text/javascript" src="ext/ext-all.js"></script> 
   <script type="text/javascript" src="js/paging.js"></script> 
<title>Struts2 Grid</title> 
</head> 
<body> 
    <div id="grid"></div> 
</body> 
</html> 
 

 

   page.jsp里面有自己写的paging.js文件

Ext.onReady(function(){ 
    var sm = new Ext.grid.CheckboxSelectionModel(); 
    
    var cm = new Ext.grid.ColumnModel([ 
        new Ext.grid.RowNumberer(), 
        sm, 
        {header:'编号',dataIndex:'id'}, 
        {header:'名称',dataIndex:'name'}, 
        {header:'年龄',dataIndex:'age'}, 
        {header:'描述',dataIndex:'descn'} 
    ]); 
    cm.defaultSortable = true; 
 
    var ds = new Ext.data.Store({ 
        proxy: new Ext.data.HttpProxy({url:'gridUtil.action',method:'POST'}), 
        reader: new Ext.data.JsonReader({ 
            totalProperty: 'totalProperty', 
            root: 'root' 
        }, [ 
            {name: 'id'}, 
            {name: 'name'}, 
            {name: 'descn'},{name:'age'} 
        ]) 
    }); 
    ds.load({params:{start:0,limit:10}}); 
    
    var grid = new Ext.grid.GridPanel({ 
        el: 'grid', 
        ds: ds, 
        cm: cm, 
        sm: sm, 
        title: 'struts2->JSON', 
        //height:400, 
        autoHeight: true, 
       bbar: new Ext.PagingToolbar({ 
            pageSize: 10, 
            store: ds, 
            displayInfo: true, 
            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
            emptyMsg: "没有记录" 
        }), 
        tbar: new Ext.Toolbar({ 
            items:[ 
                    { 
                        id:'buttonA' 
                        ,text:"Button A" 
                        ,handler: function(){ alert("You clicked Button A"); } 
                    } 
                    , 
                    '-' 
                   // new Ext.Toolbar.SplitButton({}) 
                    ,{ 
                        id:'buttonB' 
                        ,text:"Button B" 
                        ,handler: function(){ alert("You clicked Button B"); } 
                    } 
                    , 
                    '-' 
                    ,{ 
                        id:'buttonc' 
                        ,text:"Button c" 
                    } 
                ] 
            })  
       /* tbar: new Ext.PagingToolbar({ 
            pageSize: 10, 
            store: ds, 
            displayInfo: true, 
            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
            emptyMsg: "没有记录" 
        })*/ 
    }); 
    grid.render(); 
}) 
 

 

   web.xml是最最基本的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" 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>Struts Blank</display-name>

    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

</web-app>

 

还有java的文件 GridUtil.java 

 

package org.lee; 
 
import java.util.ArrayList; 
import java.util.List; 
 
 
import com.opensymphony.xwork2.Action; 
import com.opensymphony.xwork2.ActionSupport;
 
public class GridUtil extends ActionSupport{ 
 
    private int totalProperty = 100; 
    private List root; 
     
    public List getRoot() { 
        return root; 
    } 
    public void setRoot(List root) { 
        this.root = root; 
    } 
    public int getTotalProperty() { 
        return totalProperty; 
    } 
    public void setTotalProperty(int totalProperty) { 
        this.totalProperty = totalProperty; 
    } 
    public String execute(){ 
        
    	System.out.println("----->>");
    	
        root = new ArrayList(); 
        User user1 = new User(); 
        user1.setAge("20"); 
        user1.setDescn("descn1"); 
        user1.setId(1); 
        user1.setName("name1"); 
        root.add(user1); 
        User user2 = new User(); 
        user2.setAge("19"); 
        user2.setDescn("descn2"); 
        user2.setId(2); 
        user2.setName("name2"); 
        root.add(user2); 
        User user3 = new User(); 
        user3.setAge("14"); 
        user3.setDescn("descn3"); 
        user3.setId(3); 
        user3.setName("name3"); 
        root.add(user3); 
         
        return "success"; 
    } 
     
} 
 

User.java

 

package org.lee; 
 
import java.util.List; 
 
public class User { 
 
    private int id; 
    private String name; 
    private String age; 
    private String descn; 
 
    public int getId() { 
        return id; 
    } 
    public void setId(int id) { 
        this.id = id; 
    } 
    public String getName() { 
        return name; 
    } 
    public void setName(String name) { 
        this.name = name; 
    } 
    public String getAge() { 
        return age; 
    } 
    public void setAge(String age) { 
        this.age = age; 
    } 
    public String getDescn() { 
        return descn; 
    } 
    public void setDescn(String descn) { 
        this.descn = descn; 
    } 
     
} 
 

  整个工程的样子,有错误是没有关系,不是发生在java code的地方

 


 

 

 

 

看下运行的效果吧:

 


 

网上有还有其他形式的整合方式,在struts2.xml中的配置方式不一样,没有用到struts.xml自己封好的方法,向前段发生数据,而是类似于servlet在action中直接发送。

demo不举例了。祝各位好。

如果你在2012年9月15日前看到这个文章,我非常欢迎和您进行共同的学习,因为,我有好多问题想问您,

您同样有这样的需求,那么加我Q吧:1019990976,注明:extjs luexiang

 

 

 

 

 

 

 

 

  • 大小: 11.6 KB
  • 大小: 22.9 KB
  • 大小: 24.8 KB
分享到:
评论

相关推荐

    struts2-hibernate-spring-Extjs-json.rar_JSON_extjs_extjs json st

    这个压缩包“struts2-hibernate-spring-Extjs-json.rar”显然包含了关于这些技术整合使用的参考资料。下面将详细阐述这些技术以及它们之间的交互。 1. **Struts2**: Struts2是一个基于MVC(模型-视图-控制器)...

    整合--Struts2为extjs提供server数据

    【整合Struts2与Extjs】 在Web开发中,前端和后端的数据交互是必不可少的,特别是对于富客户端应用,如使用Extjs构建的界面。传统的数据获取方式可能涉及Servlet或其他HTTP服务接口,但这样的方式在处理大量数据请求...

    Struts2与extjs整合例子

    标题“Struts2与extjs整合例子”表明我们将探讨如何将这两个技术结合在一起,以实现后端与前端的高效协作。在实际项目中,这样的整合可以利用Struts2的强大处理能力和ExtJS的出色用户界面,创建出功能丰富且用户体验...

    struts2和ExtJs整合实例

    整合Struts2和ExtJS的主要目的是利用Struts2的强大后端处理能力,结合ExtJS的前端交互性和用户体验,打造高性能、易维护的Web应用。下面将详细介绍整合过程中的一些关键知识点: 1. **Struts2与ExtJS的通信方式**:...

    struts2+extjs+json整合实例

    在Struts2和ExtJS整合中,JSON起到桥梁作用,将服务器端的Action产生的数据转换为JSON格式,然后由ExtJS前端解析并显示在界面上。 整合Struts2、ExtJS和JSON的步骤通常包括以下几个部分: 1. **设置Struts2的JSON...

    ExtJS与Struts2的整合工程实例

    整合ExtJS和Struts2的主要目的是利用ExtJS的前端能力增强用户界面,同时利用Struts2的后端处理能力和灵活性处理业务逻辑。具体整合步骤包括: 1. **配置Struts2**:在Struts2的配置文件(struts.xml)中定义Action,...

    Hibernate+Spring+Struts2+ExtJS整合开发实例

    "Hibernate+Spring+Struts2+ExtJS整合开发实例"就是一个典型的Java Web应用程序开发案例,它将四个关键组件结合在一起,以实现高效、模块化的后端和前端功能。 **Hibernate** 是一个流行的Java对象关系映射(ORM)...

    extjs 跟 struts+json

    文章可能通过一个实际项目或示例,详细解释了如何将ExtJS的Grid Panel与Struts 2通过JSON进行数据交互,帮助读者理解这两种技术的整合过程。学习这些内容有助于提升Web应用的用户体验,实现数据的实时更新和交互。

    Extjs4文件上传,后台struts2

    在本文中,我们将深入探讨如何使用ExtJS 4与Struts2框架实现文件上传功能。ExtJS是一个强大的JavaScript库,提供了丰富的用户界面组件,而Struts2是Java Web开发中的一个MVC框架,用于处理后端业务逻辑。下面,我们...

    Extjs整合struts2.doc

    在整合 Struts2 时,你需要确保添加了必要的依赖库,例如 `struts2-json-plugin-2.1.8.jar`,这个插件允许 Struts2 将结果直接转换为 JSON 格式,便于与 ExtJS 通信。 配置方面,你需在 `web.xml` 文件中设置 ...

    struts2+extjs整合包

    在整合Struts2和ExtJS时,通常会通过Ajax通信来实现实时的用户交互。Struts2的JSON插件可以方便地将Action的结果转换为JSON格式,供ExtJS的组件消费。同时,ExtJS可以通过Store和Proxy组件来管理和加载由Struts2返回...

    spring3+ibaits3+struts2.18+Extjs3整合增删查改

    "Spring3+iBatis3+Struts2.18+ExtJS3整合增删查改"是一个典型的Java Web开发组合,用于实现高效的数据管理和用户界面交互。下面我们将深入探讨这个组合中的每个组件及其在整体架构中的作用。 **Spring3**: Spring...

    extjs与struts的整合代码

    将ExtJS与Struts整合,可以利用ExtJS的前端交互能力,结合Struts的强大后端处理,打造高性能的Web应用。通常,整合过程涉及以下几个关键步骤: 1. **配置Struts2 Action:** 在Struts2的配置文件中定义Action,这些...

    Extjs+Struts整合入门实例

    本入门实例主要探讨的是如何将ExtJS与Struts进行整合,以构建一个图书管理系统的前端和后端。这样的整合使得开发者能够利用ExtJS的前端优势,提供美观且交互性强的用户界面,同时利用Struts在服务器端进行数据处理和...

    搭建EXTJS和STRUTS2框架(ext和struts2简单实例)

    &lt;taglib-location&gt;/WEB-INF/struts-tags.tld&lt;/taglib-location&gt; &lt;/jsp-config&gt; &lt;welcome-file-list&gt; &lt;welcome-file&gt;index.jsp&lt;/welcome-file&gt; &lt;/welcome-file-list&gt; &lt;/web-app&gt; ``` - 关键配置解释: - `...

    Struts2 Spring2.5 Hiberante3.3.2 +ExtJS(Struts2-json)做的CRUD

    Struts2、Spring2.5、Hibernate3.3.2以及ExtJS是Java Web开发中的四大核心技术,它们共同构建了一个强大的MVC(Model-View-Controller)架构,用于实现高效、灵活的企业级应用。这个DEMO是将这些技术集成在一起,以...

    extjs_struts2_整合

    extjs_struts2_整合

    extjs struts2 多图片批量上传控件

    总之,"extjs struts2 多图片批量上传控件"是一个整合了前后端技术的实用功能,它结合了ExtJS的用户界面优势和Struts2的服务器处理能力,为开发者提供了一个高效、安全的多图片批量上传解决方案。实际项目中,开发者...

    extjs Struts 实例程序

    ExtJS和Struts是两种广泛应用于Web开发的技术。ExtJS是一种强大的JavaScript库,主要用于构建用户界面,而Struts是基于MVC(Model-View-Controller)设计模式的Java Web框架。这个“ExtJS Struts实例程序”是一个...

Global site tag (gtag.js) - Google Analytics