寻找Yui-Ext高手(yui-ext+json+struts2)完美组合的例子出现问题-CSDN博客

页面内容如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DWR学习 </title>
<link href="<s:url value="/css/main.css"/>" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/ext-1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-1.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

        var ds=new Ext.data.Store({
        proxy:new Ext.data.ScriptTagProxy({url:'http://localhost:10001/struts2/JsonAction.action'}),
        reader:new Ext.data.JsonReader({
          root:'persons',
          totalProperty:'totalCount',
          id:'id'
        },[
          {name:'sex', mapping:'sex'},
          {name:'username', mapping:'username'},
        ]),
        remoteSort: true
        });

  // example of custom renderer function
        function italic(value){
            return '<i>' + value + '</i>';
        }

  // example of custom renderer function
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
  // example of custom renderer function
        function pctChange(val){
      if(val > 0){
          return '<span style="color:green;">' + val + '%</span>';
      }else if(val < 0){
          return '<span style="color:red;">' + val + '%</span>';
      }
      return val;
  }

  // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
        // custom or reusable ColumnModels
        /*
        var colModel = new Ext.grid.ColumnModel([
   {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
   {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
   {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
   {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
   {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
  ]);
  */
  var colModel=new Ext.grid.ColumnModel([
   {
            id: 'sex',
            header: "地址",
            dataIndex: 'sex',
            width: 250
        },
        {
            id: 'username',
            header: "姓名",
            dataIndex: 'username',
            width: 150
        }
  ]);

        // create the Grid
        var grid = new Ext.grid.Grid('datagrid', {
            ds: ds,
            cm: colModel,
            selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
            enableColLock:false,
            loadMask: true

});
        /*
        var layout = Ext.BorderLayout.create({
            center: {
                margins:{left:3,top:3,right:3,bottom:3},
                panels: [new Ext.GridPanel(grid)]
            }
        }, 'grid-panel');
  */
  
  var rz=new Ext.Resizable('datagrid',{
   wrap:true,
         minHeight:100,
         pinned:true,
         handles: 's'
  });
  rz.on('resize', grid.autoSize, grid);

  grid.render();

  var gridHead = grid.getView().getHeaderPanel(true);//表格头
  var tb = new Ext.Toolbar(gridHead);

       tb.add( {
      icon: 'images/list-items.gif', //图标可单行显示
      cls: 'x-btn-icon',      // 纯图标
      tooltip: '修改',
      handler:function(){alert("修改");}
  });
  tb.add("-");
        tb.add({
        icon:'images/new.png',
        cls:'x-btn-text-icon details', //文本按钮
        //tooltip: '新建',
        text:'新建',
        handler:function(){alert("新建");}
        });
        tb.add("-");
        tb.add({
            pressed: true,
        enableToggle:true,
        icon:'images/del.gif',
        cls:'x-btn-text-icon details', //文本按钮
        text: '删除',
        handler:function(){alert("删除");}
        });

  var gridFoot = grid.getView().getFooterPanel(true); //表格尾

  var paging = new Ext.PagingToolbar(gridFoot, ds, {
         pageSize: 3,
         displayInfo: true,
         displayMsg: 'Displaying topics {0} - {1} of {2}',
         emptyMsg: "No topics to display"
    });
     // add the detailed view button
     paging.add('-', {
         pressed: true,
         enableToggle:true,
         text: 'Detailed View',
         cls: 'x-btn-text-icon details',
         toggleHandler: toggleDetails
     });

// trigger the data store load
ds.load({params:{start:0, limit:3}});

  function toggleDetails(btn, pressed){
         //cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
         //cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
         grid.getView().refresh();
    }

//grid.getSelectionModel().selectFirstRow();
});

</script>
</head>
<body>
<div style="width:694px;" class="x-box-blue">
     <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
        <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
            <div id="datagrid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;position:relative;left:0;top:0;"></div>
        </div></div></div>
        <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
    </div>
</body>
</html>

java 代码

package web.example;
import util.JsonDemo;
import java.util.*;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.*;
import com.googlecode.jsonplugin.annotations.JSON;
import domain.Person;
/**
* Json学习
* @author peidw
*
*/
public class JsonAction extends ActionSupport{
private String totalCount="";
private List <person></person> plist=new ArrayList <person></person> ();
private transient int start=0;
private transient int limit=0;
private transient String _dc="";
private transient String callback="";
@Override
public String execute(){
/*
JsonDemo jd=new JsonDemo();
ActionContext ac=ActionContext.getContext();
JSONArray ja=jd.listToArray();
ac.put("ja", ja.toString());
bookId = 15645912;
title = "Max On Java";
price = 0.9999d;
comments = new ArrayList<string></string>(3);
comments.add("It's no bad!");
comments.add("WOW!");
comments.add("No comment!");
secret1 = "You can't see me!";
secret2 = "I am invisible!";
return this.SUCCESS;
*/
System.out.println("start="+start+",limit="+limit);
plist.add(new Person(new Long(1),"小裴","广西合浦西场镇"));
plist.add(new Person(new Long(2),"小妹","广西合浦西场镇"));
plist.add(new Person(new Long(3),"小红","广西西天"));
plist.add(new Person(new Long(4),"小斌","广西河池"));
plist.add(new Person(new Long(5),"小李","广西南宁"));
plist.add(new Person(new Long(6),"小梅","广西百色"));
plist.add(new Person(new Long(7),"小天","广西平果"));
plist.add(new Person(new Long(8),"小地","广西北海"));
plist.add(new Person(new Long(9),"任我行","中国四川成都"));
plist.add(new Person(new Long(10),"任小姐","中国广西"));
plist.add(new Person(new Long(11),"小天地","广西合浦西场镇"));
totalCount=String.valueOf(plist.size());
/*
if(start==0 && limit==0){
}else{
setPlist(plist.subList(start, limit));
}
*/
return this.SUCCESS;
}
public String getTotalCount() {
return totalCount;
}
public void setTotalCount(String totalCount) {
this.totalCount = totalCount;
}
@JSON(name="persons")
public List <person></person> getPlist() {
return plist;
}
public void setPlist(List <person></person> plist) {
this.plist = plist;
}
public void setLimit(int limit) {
this.limit = limit;
}
public void setStart(int start) {
this.start = start;
}
public void set_dc(String _dc) {
this._dc = _dc;
}
public void setCallback(String callback) {
this.callback = callback;
}
}

该Action类使用了，http://code.google.com/p/jsonplugin/downloads/list 这个插件来生成Json文件。我这个Action生成的json文件如下如示：

{"persons":[{"id":1,"sex":"广西合浦西场镇","username":"小裴"},{"id":2,"sex":"广西合浦西场镇","username":"小妹"},{"id":3,"sex":"广西西天","username":"小红"},{"id":4,"sex":"广西河池","username":"小斌"},{"id":5,"sex":"广西南宁","username":"小李"},{"id":6,"sex":"广西百色","username":"小梅"},{"id":7,"sex":"广西平果","username":"小天"},{"id":8,"sex":"广西北海","username":"小地"},{"id":9,"sex":"中国四川成都","username":"任我行"},{"id":10,"sex":"中国广西","username":"任小姐"},{"id":11,"sex":"广西合浦西场镇","username":"小天地"}],"totalCount":"11"}