论坛首页 → Web前端技术论坛 →

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

浏览 6283 次
已锁定 主题：寻找Yui-Ext高手(yui-ext+json+struts2)完美组合的例子出现问题
该帖已经被评为隐藏帖
作者 正文
  • pdw2009
  • 等级: 一星会员
  • 文章: 145
  • 积分: 124
   发表时间：2007-08-14  

页面内容如下：

<%@ 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 代码

    1. package web.example;   
    2.   
    3. import util.JsonDemo;   
    4. import java.util.*;   
    5. import com.opensymphony.xwork2.ActionContext;   
    6. import com.opensymphony.xwork2.ActionSupport;   
    7. import net.sf.json.*;   
    8. import com.googlecode.jsonplugin.annotations.JSON;   
    9.   
    10. import domain.Person;   
    11. /**  
    12.  * Json学习  
    13.  * @author peidw  
    14.  *  
    15.  */  
    16. public class JsonAction extends ActionSupport{   
    17.        
    18.        
    19.     private String totalCount="";   
    20.        
    21.     private List <person></person>  plist=new ArrayList <person></person> ();    
    22.        
    23.        
    24.     private transient int start=0;   
    25.     private transient int limit=0;   
    26.     private transient String _dc="";   
    27.     private transient String callback="";   
    28.        
    29.     @Override  
    30.     public String execute(){   
    31.         /*  
    32.         JsonDemo jd=new JsonDemo();  
    33.         ActionContext ac=ActionContext.getContext();  
    34.         JSONArray ja=jd.listToArray();  
    35.         ac.put("ja", ja.toString());  
    36.           
    37.         bookId = 15645912;  
    38.         title = "Max On Java";  
    39.         price = 0.9999d;  
    40.         comments = new ArrayList<string></string>(3);  
    41.         comments.add("It's no bad!");  
    42.         comments.add("WOW!");  
    43.         comments.add("No comment!");  
    44.         secret1 = "You can't see me!";  
    45.         secret2 = "I am invisible!";  
    46.         return this.SUCCESS;  
    47.         */  
    48.         System.out.println("start="+start+",limit="+limit);   
    49.         plist.add(new Person(new Long(1),"小裴","广西合浦西场镇"));   
    50.         plist.add(new Person(new Long(2),"小妹","广西合浦西场镇"));   
    51.         plist.add(new Person(new Long(3),"小红","广西西天"));   
    52.         plist.add(new Person(new Long(4),"小斌","广西河池"));   
    53.         plist.add(new Person(new Long(5),"小李","广西南宁"));   
    54.         plist.add(new Person(new Long(6),"小梅","广西百色"));   
    55.         plist.add(new Person(new Long(7),"小天","广西平果"));   
    56.         plist.add(new Person(new Long(8),"小地","广西北海"));   
    57.         plist.add(new Person(new Long(9),"任我行","中国四川成都"));   
    58.         plist.add(new Person(new Long(10),"任小姐","中国广西"));   
    59.         plist.add(new Person(new Long(11),"小天地","广西合浦西场镇"));   
    60.         totalCount=String.valueOf(plist.size());   
    61.         /*  
    62.         if(start==0 && limit==0){  
    63.               
    64.         }else{  
    65.             setPlist(plist.subList(start, limit));  
    66.         }  
    67.         */  
    68.         return this.SUCCESS;   
    69.     }   
    70.   
    71.     public String getTotalCount() {   
    72.         return totalCount;   
    73.     }   
    74.     public void setTotalCount(String totalCount) {   
    75.         this.totalCount = totalCount;   
    76.     }   
    77.     @JSON(name="persons")   
    78.     public List <person></person>  getPlist() {   
    79.         return plist;   
    80.     }   
    81.     public void setPlist(List <person></person>  plist) {   
    82.         this.plist = plist;   
    83.     }   
    84.   
    85.   
    86.   
    87.     public void setLimit(int limit) {   
    88.         this.limit = limit;   
    89.     }   
    90.   
    91.   
    92.   
    93.     public void setStart(int start) {   
    94.         this.start = start;   
    95.     }   
    96.   
    97.     public void set_dc(String _dc) {   
    98.         this._dc = _dc;   
    99.     }   
    100.   
    101.     public void setCallback(String callback) {   
    102.         this.callback = callback;   
    103.     }   
    104.        
    105. }   

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

    1. {"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"}  

    我页面生成的图形如下：
    yui-ext 表格UI例子

    现在面临的问题就是数据无法加载，JS提示的错误信息如下：

    1. 行: 2   
    2.   
    3. 字符: 11   
    4.   
    5. 错误: 缺少 ';'   
    6.   
    7. 代码: 0   
    8.   
    9. URL: http://localhost:10001/struts2/dwrjson.jsp  

    就这个问题困扰了我很久，又没用yui-ext的朋友，所以只能发到BBS向各位寻错，谢谢，

    欢迎正在学习和使用yui-ext的朋友加我的QQ：286870817

    谢谢!

    		•
    返回顶楼
             
    • movingboy
    • 等级: 三星会员
    • 文章: 572
    • 积分: 350
       发表时间：2007-08-15  
    建议用FireFox+FireBug调试一下
    返回顶楼
              回帖地址
    0 请登录后投票
    论坛首页 → Web前端技术版

    跳转论坛:
    Global site tag (gtag.js) - Google Analytics