`
pdw2009
  • 浏览: 20803 次
社区版块
存档分类
最新评论

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

    博客分类：
  • java
yui-ext json+struts2 
阅读更多

页面内容如下：

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

    谢谢!

    • 分享到：
    评论
    1 楼 movingboy 2007-08-15  
    建议用FireFox+FireBug调试一下
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      YUI-EXT使用详解

      通过提供的压缩包文件"ext 2.rar"、"ext教程.rar"和"yui_2.3.1.zip"，你可以获得YUI-EXT的源码、文档和示例，进一步学习和研究其使用方法。这些资源将帮助你深入理解如何集成YUI-EXT到项目中，如何创建和配置组件，...

      YUI-EXT

      YUI-EXT开发学习帮助手册，自己收集网上资料整理的。

      Struts2+JSON+YUI组合应用之二构建RichClient

      综上所述，Struts2+JSON+YUI的组合为开发者提供了一种高效、灵活的开发富客户端应用的方式，通过Struts2处理业务逻辑和数据传输，利用JSON简化数据交换，结合YUI提升用户界面的交互性和美观性。这种技术栈的应用广泛...

      Struts2中使用JSON+YUI之一[包含功能代码段]

      在Struts2中整合JSON（JavaScript Object Notation）和YUI（Yahoo User Interface Library）可以实现高效的异步数据交互，提升用户体验。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和...

      YUI-EXT教材及实例

      我们将讲讲怎么使用Ext，来完成一些JavaScript常见的任务.这是关于Ext的入门教程。

      yui-yuidoc-yuidoc-50-529-gc631758

      2. **YUI Components**：YUI 提供了各种组件，如 Button、Grids、Charts、Animation 等，这些组件遵循一致的设计模式，易于理解和集成到项目中。 3. **YUI Event System**：强大的事件系统支持事件监听和分发，使得...

      学习YUI.Ext 第六天--关于树TreePanel(Part 1)

      在本文中，我们将深入探讨YUI.Ext库中的一个重要组件——TreePanel。TreePanel是一个用于构建交互式树形结构视图的组件，它在YUI.Ext 0.40版本中首次引入。尽管YUI自身已经提供了TREE VIEW组件，但开发者Jack Slocum...

      grunt-yui-compressor-源码.rar

      2. **YUI Compressor简介** YUI Compressor是由Yahoo开发的开源工具，它能对JavaScript和CSS进行压缩和优化，通过删除注释、空格和换行，以及进行变量名混淆，达到减小文件体积的目的。YUI Compressor还支持CSS的...

      yuicompressor-maven-plugin

      **yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件，主要用于优化前端资源，特别是JavaScript和CSS文件。这个插件是基于YUI Compressor，一个由Yahoo开发的开源工具，它能...

      yuicompressor-yui compressor

      C:\java -jar yuicompressor-2.4.2.jar editor.js -o editor2.js 参数说明： yuicompressor-2.4.2.jar 为工具包jar editor.js为要压缩的js -o editor2.js为压缩完成后的文件名 压缩率： 对resources下js...

      yuicompressor-2.4.8.jar

      2. 配置项目构建：在项目的构建配置中添加yuicompressor的任务，指定输入文件路径、输出文件路径以及压缩级别等参数。 3. 运行构建：保存配置后，执行构建操作，Idea会自动调用yuicompressor对指定文件进行压缩。 ...

      ext+struts2的集成实例

      本实例主要关注"ext+struts2"的集成，这是一种常见的Java Web开发组合，其中ext是一个强大的JavaScript库，用于构建富客户端应用，而Struts2是基于MVC设计模式的Java Web框架，负责后端业务逻辑处理和页面展示的组织...

      YUI-ajax框架开发文档

      YUI（Yahoo! User Interface Library）是雅虎公司推出的一款开源JavaScript库，旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI的核心在于提供了一系列模块化的组件，包括DOM操作、事件处理、动画效果、Ajax...

      Ajax(yui-slideshow)

      **Ajax(yui-slideshow)详解** Ajax，全称Asynchronous JavaScript and XML，是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提升了用户...

      Yui_ext 学习笔记

      【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

      yui.rar 例子

      《深入理解YUI：基于“yui.rar 例子”的解析》 YUI，全称Yahoo! User Interface Library，是雅虎公司推出的一款开源JavaScript库，旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

      前端开源库-yui-compressor

      **前端开源库-YUI Compressor** ...虽然现在有更多现代的压缩工具出现，但YUI Compressor仍因其简单易用和良好的压缩效果，在许多项目中得到应用。了解并熟练使用此类工具，是提升网站性能的关键步骤之一。

      yui-compressor 2.4.6 2011-04-15发布YUI

      yui compressor 2.4.6 发布日期：2011-04-15 用例： java -jar yuicompressor-2.4.6.jar myfile.js -o myfile-min.js

      JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

      JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    Magicbox
    Global site tag (gtag.js) - Google Analytics