WEB框架研究笔记二（Extjs调用Struts)

20090626

昨天研究了STRUTS2，今天的任务是如何让STRUTS和EXTJS合作。采用EXTJS的一个例子进行改造。需要达到的效果：

1.按照原来Extjs里的例子将Extjs包放到Struts例子工程中。

2.拷贝GRID的HTML和JS

grid-json-data.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Array Grid Example</title>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
        
        <script type="text/javascript" src="../adapter/ext/ext-base.js">
        </script>
        
        <script type="text/javascript" src="../ext-all.js">
        </script>
        <script type="text/javascript" src="json-grid.js"></script>
    </head>
    <body>
      <div id="grid-example"></div>
      <div id="delete"></div>
    </body>
</html>

json-grid.js

Ext.onReady(function(){
Ext.data.Store.prototype.applySort = function(){
    if (this.sortInfo && !this.remoteSort) {
      var s = this.sortInfo, f = s.field;
      var st = this.fields.get(f).sortType;
      var fn = function(r1, r2){
        var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
        if (typeof(v1) == "string"){
          return v1.localeCompare(v2);
        }
        return v1 > v2 ? 1 : (v1 < v2 ? -1:0);
      };
      this.data.sort(s.direction, fn);
      if(this.snapshot && this.snapshot != this.data){
        this.snapshot.sort(s.direction, fn);
      }
    }
};

var store = new Ext.data.JsonStore({
    root: 'root',
    totalProperty: 'totalProperty',
    fields: [
       {name: 'id'},
       {name: 'name'},
       {name: 'descn'}
    ],
    proxy: new Ext.data.HttpProxy({url:'http://192.168.1.253:8088/strutsProj/ExtjsSample/grid.jsp'})
});

var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            new Ext.grid.RowNumberer(),
            sm,
            {header:'编号', renderer:function(value, cellmeta, record, rowIndex){
              return rowIndex + 1;
            }},
            {id:'id',header: "ID中文字", sortable: true, dataIndex: 'id', 80},
            {header: "NAME", sortable: true, dataIndex: 'name', 80},
            {id: 'descn', header: "DESCN",sortable: true, dataIndex: 'descn', 80}
        ],
        stripeRows: true,
        autoExpandColumn: 'descn',
        sm: sm,
        height:350,
        600,
        tbar: new Ext.PagingToolbar({
          pageSize: 10,
          store: store,
          displayInfo: true,
          displayMsg: '显示第{0}条到{1}条记录，一共{2}条',
          emptyMsg: '没有记录'
        }),
        title:'Array Grid'
    });

    grid.render('grid-example');
//    store.loadData({params:{start:0,limit:10}});
    store.load({params:{start:0, limit:10}});

    //删除按钮
    Ext.get('delete').on('click', function(){
      store.remove(store.getAt(1));
      grid.view.refresh();
    });
});

grid.jsp:

<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);

    String json = "{totalProperty:100, root:[";
    for (int i = index; i < index + pageSize; i ++){
      json += "{id:" + i + ",name:'name" + i + "', descn:'descn" + i + "'}";
      if (i != pageSize + index - 1){
        json += ',';
      }
    }
    json += "]}";
    response.getWriter().write(json);

}
catch (Exception ex){
}
%>

OK,可以正常运行了。这个例子是EXTJS和JSP连接，直接从EXTJS的例子里搬过来的，现在需要和STRUTS连接。

3.写GridAction

package action;

import java.io.*;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class GridAction extends ActionSupport{
    private String start;
    private String limit;
    public void setStart(String start)
    {
        System.out.println(start);
          this.start = start;
    }
    public String getStart()
    {
        return start;
    }
    public void setLimit(String limit)
    {
        System.out.println(limit);
          this.limit = limit;
    }
    public String getLimit()
    {
        return limit;
    }
    public String execute() throws Exception
    {
        HttpServletResponse response = ServletActionContext.getResponse();
        try{
          int index = Integer.parseInt(start);
          int pageSize = Integer.parseInt(limit);

          String json = "{totalProperty:100, root:[";
          for (int i = index; i < index + pageSize; i ++){
            json += "{id:" + i + ",name:'name" + i + "', descn:'descn" + i + "'}";
            if (i != pageSize + index - 1){
              json += ',';
            }
          }
          json += "]}";
          response.getWriter().write(json);

        }
        catch (Exception ex){
        }
        return null;
    }

}

4.配置struts.xml

5.修改json-grid.js

var store = new Ext.data.JsonStore({
    root: 'root',
    totalProperty: 'totalProperty',
    fields: [
       {name: 'id'},
       {name: 'name'},
       {name: 'descn'}
    ],
//    proxy: new Ext.data.HttpProxy({url:'http://192.168.1.253:8088/strutsProj/ExtjsSample/grid.jsp'})
    proxy: new Ext.data.HttpProxy({url:'grid.action'})
});

OK,可以了，哈哈。