Extjs作为前台的界面展示是非常好的框架,ajax技术的使用使得B/S系统犹如C/S一般。

       下面的实例是extjs与struts2整合的实例,网上的实例写的都挺好,但我发现配置文件往往很少写出来的。

 

      1.struts2 jar包的引入:

       在上次的图片中,括号的是要格外加入的json 包,struts2支持josn要用到这个,有人说是josn的拦截器。

    

      2.struts2的代码:

 

import com.opensymphony.xwork2.ActionSupport;
public class JsonAction extends ActionSupport{
 private int id;
 private String name;
 private String password;
 @Override
 public String execute() throws Exception {
  
  System.out.println("****************");//检测extjs前端的函数不是不访问改action
  this.id = 5;
  this.name = "chenwei";
  this.password = "123456";
  
  return "success";
 }
 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 getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 
}

 

3.struts2的配置文件

<?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="true" />
    <constant name="struts.objectFactory" value="spring" />
  

     <package name="ext"  extends="json-default"> 
      <action name="jsonAction1" class="json.actions.JsonAction">
               <result type="json" name="success">
                 <param name="includeProperties">id,name,password</param>
               </result>
       </action>
      
     </package>
     
</struts>

      这里需说明的是:“success”是struts2的action中的方法返回的值,解释到以后就执行这个result,有的老师或者朋友写着的是:action的方法返回的null,这样可能也行,但是我测试好多次就是搞不出来。

       其实我觉得和一般的返回是一样的,返回什么字符串(比如success,error等等),result接到相应的字符串,就执行相应result.

      下面是最重要的说明: 

   

<param name="includeProperties">id,name,password</param>

    name="includeProperties"中的includeProperties是固定的参数名字,一共有三个,还有两个是root和excludeProperties。

 

使用方法:
includeProperties 参数:输出结果中需要包含的属性值,这里正则表达式和属性名匹配,可以用“,”分割填充多个正则表达式。
  如<param name="includeProperties">module.*,user\.userName</param>  表示是module的所有属性及用户的用户名
excludeProperties 参数:输出结果需要排除的属性值,也支持正则表达式匹配属性名,可以用“,”分割填充多个正则表达式,类同includeProperties。

  

   实例的意思就是把三个设置的值,id,name,password暴露出来,让extjs接受。这样struts2端就写好了。

 

 

extjs代码:

 

Ext.onReady(function(){
     

 var vstore = new Ext.data.JsonStore({//定单的数据
  autoDestory:true,
  url:'jsonAction1.action',
  //root:'lists',这个字段可以在探究下,有朋友如有有兴趣一起讨论下QQ1019990976 注明jsonstore
  //totalProperty:"rowCount",//总的记录数据
  idProperty:'id',
  fields:["id","name","password"]
          
 });
      var grid = new Ext.grid.GridPanel({
      title:"高级管理员",
      store:vstore,
      columns:[{header:"ID",     dataIndex:"id",width:20},
            {header:"采购单号", dataIndex:"name",width:100},
            {header:"采购日期", dataIndex:"password",width:100}
            ]
            
     });
     
    vstore.load();
   
   new Ext.Viewport({
     layout:"border",
     items:[{
       title:"超级管理员界面",
        region:"north",
          html:"<center>基于Extjs的缺陷管理系统</center>",
        //html:"<img src='head1.jsp'/>",
        height:100
      },{
          region:"west",
          title:"功能菜单",
          width:150,
          items:menu,
          split:true
 
      },{
          region:"center",
          title:"主区域",
          //layout:"fit",
          id:"mainContent",
          items:grid
      }]
    });
   
  });

 

 

html的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>测试界面</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GBK">
    
  <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="testext/3.js"></script>  </head>
  
  <body>  </body>
</html>

这样就OK了。

 

 

    后续工作是:Set list map 还有自己定义的类比如 Page 里面有三个字段这样的实体类 怎么传递到extjs中去,这个是需求探讨的。

    extjs我觉得最大的问题的怎么使用接受参数,因为现在可视化的可编辑软件已经开发出了,数据转换以后,就可能代人使用。所有如果熟练使用了extjs交互的ajax函数,那么就掌握了extjs的开发。