extjs 整合 struts2:

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

那么接下去,就简单了。

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. >
    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. >
    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. >
    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. sm = new
    3.        
    4. cm = new
    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. ds = new
    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. grid = new
    28.         el: 'grid',    
    29.         ds: ds,    
    30.         cm: cm,    
    31.         sm: sm,    
    32. >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. "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. 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
    2.     
    3. import
    4. import
    5.     
    6.     
    7. import
    8. import
    9.     
    10. public class GridUtil extends
    11.     
    12. private int totalProperty = 100;     
    13. private
    14.         
    15. public
    16. return
    17.     }    
    18. public void
    19. this.root = root;     
    20.     }    
    21. public int
    22. return
    23.     }    
    24. public void setTotalProperty(int
    25. this.totalProperty = totalProperty;     
    26.     }    
    27. public
    28.            
    29. "----->>");    
    30.            
    31. new
    32. new
    33. "20");     
    34. "descn1");     
    35. 1);     
    36. "name1");     
    37.         root.add(user1);    
    38. new
    39. "19");     
    40. "descn2");     
    41. 2);     
    42. "name2");     
    43.         root.add(user2);    
    44. new
    45. "14");     
    46. "descn3");     
    47. 3);     
    48. "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
    2.     
    3. import
    4.     
    5. public class
    6.     
    7. private int
    8. private
    9. private
    10. private
    11.     
    12. public int
    13. return
    14.     }    
    15. public void setId(int
    16. this.id = id;     
    17.     }    
    18. public
    19. return
    20.     }    
    21. public void
    22. this.name = name;     
    23.     }    
    24. public
    25. return
    26.     }    
    27. public void
    28. this.age = age;     
    29.     }    
    30. public
    31. return
    32.     }    
    33. public void
    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.xml中的配置方式不一样,没有用到struts.xml自己封好的方法,向前段发生数据,而是类似于servlet在action中直接发送。