struts2 + extjs

 

extjs 整合 struts2:

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

 


struts2 + extjs_第1张图片

 

那么接下去,就简单了。

struts.xml的配置

 

Xml代码 复制代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC   
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
  4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5.   
  6. <struts>  
  7.   
  8.     <constant name="struts.enable.DynamicMethodInvocation"  
  9.         value="false" />  
  10.     <constant name="struts.devMode" value="false" />  
  11.   
  12.     <package name="default" extends="json-default" namespace="/">  
  13.         <action name="gridUtil" class="org.lee.GridUtil">  
  14.             <result type="json" name="success"/>  
  15.         </action>  
  16.     </package>  
  17.   
  18.     <!--   
  19.         <include file="example.xml"/>  
  20.         Add packages here -->  
  21.   
  22. </struts>  
<?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" 

Html代码 复制代码  收藏代码
  1.     pageEncoding="UTF-8"%>    
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
  3. <html>    
  4. <head>    
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  6.   
  7.      <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />    
  8.         
  9.      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>    
  10.     <!-- ENDLIBS -->    
  11.     
  12.    <script type="text/javascript" src="ext/ext-all.js"></script>    
  13.    <script type="text/javascript" src="js/paging.js"></script>    
  14. <title>Struts2 Grid</title>    
  15. </head>    
  16. <body>    
  17.     <div id="grid"></div>    
  18. </body>    
  19. </html>   
    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文件

 

Html代码 复制代码  收藏代码
  1. Ext.onReady(function(){    
  2.     var sm = new Ext.grid.CheckboxSelectionModel();    
  3.        
  4.     var cm = new Ext.grid.ColumnModel([    
  5.         new Ext.grid.RowNumberer(),    
  6.         sm,    
  7.         {header:'编号',dataIndex:'id'},    
  8.         {header:'名称',dataIndex:'name'},    
  9.         {header:'年龄',dataIndex:'age'},    
  10.         {header:'描述',dataIndex:'descn'}    
  11.     ]);    
  12.     cm.defaultSortable = true;    
  13.     
  14.     var ds = new Ext.data.Store({    
  15.         proxy: new Ext.data.HttpProxy({url:'gridUtil.action',method:'POST'}),    
  16.         reader: new Ext.data.JsonReader({    
  17.             totalProperty: 'totalProperty',    
  18.             root: 'root'    
  19.         }, [    
  20.             {name: 'id'},    
  21.             {name: 'name'},    
  22.             {name: 'descn'},{name:'age'}    
  23.         ])    
  24.     });    
  25.     ds.load({params:{start:0,limit:10}});    
  26.        
  27.     var grid = new Ext.grid.GridPanel({    
  28.         el: 'grid',    
  29.         ds: ds,    
  30.         cm: cm,    
  31.         sm: sm,    
  32.         title: 'struts2->JSON',    
  33.         //height:400,    
  34.         autoHeight: true,    
  35.        bbar: new Ext.PagingToolbar({    
  36.             pageSize: 10,    
  37.             store: ds,    
  38.             displayInfo: true,    
  39.             displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',    
  40.             emptyMsg: "没有记录"    
  41.         }),    
  42.         tbar: new Ext.Toolbar({    
  43.             items:[    
  44.                     {    
  45.                         id:'buttonA'    
  46.                         ,text:"Button A"    
  47.                         ,handler: function(){ alert("You clicked Button A"); }    
  48.                     }    
  49.                     ,    
  50.                     '-'    
  51.                    // new Ext.Toolbar.SplitButton({})    
  52.                     ,{    
  53.                         id:'buttonB'    
  54.                         ,text:"Button B"    
  55.                         ,handler: function(){ alert("You clicked Button B"); }    
  56.                     }    
  57.                     ,    
  58.                     '-'    
  59.                     ,{    
  60.                         id:'buttonc'    
  61.                         ,text:"Button c"    
  62.                     }    
  63.                 ]    
  64.             })     
  65.        /* tbar: new Ext.PagingToolbar({    
  66.             pageSize: 10,    
  67.             store: ds,    
  68.             displayInfo: true,    
  69.             displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',    
  70.             emptyMsg: "没有记录"    
  71.         })*/    
  72.     });    
  73.     grid.render();    
  74. })   
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是最最基本的配置

 

Java代码 复制代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <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">   
  3.   
  4.     <display-name>Struts Blank</display-name>   
  5.   
  6.     <filter>   
  7.         <filter-name>struts2</filter-name>   
  8.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>   
  9.     </filter>   
  10.   
  11.     <filter-mapping>   
  12.         <filter-name>struts2</filter-name>   
  13.         <url-pattern>/*</url-pattern>   
  14.     </filter-mapping>   
  15.   
  16.     <welcome-file-list>   
  17.         <welcome-file>index.html</welcome-file>   
  18.     </welcome-file-list>   
  19.   
  20. </web-app>  
<?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 

 

 

Java代码 复制代码  收藏代码
  1. package org.lee;    
  2.     
  3. import java.util.ArrayList;    
  4. import java.util.List;    
  5.     
  6.     
  7. import com.opensymphony.xwork2.Action;    
  8. import com.opensymphony.xwork2.ActionSupport;   
  9.     
  10. public class GridUtil extends ActionSupport{    
  11.     
  12.     private int totalProperty = 100;    
  13.     private List root;    
  14.         
  15.     public List getRoot() {    
  16.         return root;    
  17.     }    
  18.     public void setRoot(List root) {    
  19.         this.root = root;    
  20.     }    
  21.     public int getTotalProperty() {    
  22.         return totalProperty;    
  23.     }    
  24.     public void setTotalProperty(int totalProperty) {    
  25.         this.totalProperty = totalProperty;    
  26.     }    
  27.     public String execute(){    
  28.            
  29.         System.out.println("----->>");   
  30.            
  31.         root = new ArrayList();    
  32.         User user1 = new User();    
  33.         user1.setAge("20");    
  34.         user1.setDescn("descn1");    
  35.         user1.setId(1);    
  36.         user1.setName("name1");    
  37.         root.add(user1);    
  38.         User user2 = new User();    
  39.         user2.setAge("19");    
  40.         user2.setDescn("descn2");    
  41.         user2.setId(2);    
  42.         user2.setName("name2");    
  43.         root.add(user2);    
  44.         User user3 = new User();    
  45.         user3.setAge("14");    
  46.         user3.setDescn("descn3");    
  47.         user3.setId(3);    
  48.         user3.setName("name3");    
  49.         root.add(user3);    
  50.             
  51.         return "success";    
  52.     }    
  53.         
  54. }   
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

 

 

Java代码 复制代码  收藏代码
  1. package org.lee;    
  2.     
  3. import java.util.List;    
  4.     
  5. public class User {    
  6.     
  7.     private int id;    
  8.     private String name;    
  9.     private String age;    
  10.     private String descn;    
  11.     
  12.     public int getId() {    
  13.         return id;    
  14.     }    
  15.     public void setId(int id) {    
  16.         this.id = id;    
  17.     }    
  18.     public String getName() {    
  19.         return name;    
  20.     }    
  21.     public void setName(String name) {    
  22.         this.name = name;    
  23.     }    
  24.     public String getAge() {    
  25.         return age;    
  26.     }    
  27.     public void setAge(String age) {    
  28.         this.age = age;    
  29.     }    
  30.     public String getDescn() {    
  31.         return descn;    
  32.     }    
  33.     public void setDescn(String descn) {    
  34.         this.descn = descn;    
  35.     }    
  36.         
  37. }   
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 + extjs_第2张图片

 

 

 

 

看下运行的效果吧:

 


struts2 + extjs_第3张图片

 

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

你可能感兴趣的:(struts2)