neoliao http://neoliao.javaeye.com UTF-8 Copyright 2003-2008, JavaEye.com http://blogs.law.harvard.edu/tech/rss JavaEye - 做最棒的软件开发交流社区 共同学习YUI-EXT（GIRD部分） neoliao 作者: neoliao  链接：http://neoliao.javaeye.com/blog/64418  发表时间: 2007年03月21日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

共同学习YUI-EXT（GIRD部分）
当我第一次接触到YUI时，我就有一种把它变成我的东西的冲动，当看到华丽的YUI-EXT时，我知道我已经不能再等了！
让我们一起共同学习吧！

个人认为YUI-EXT做的相当好的是GIRD和LAYOUT，而项目中GIRD用的特别多，所以先从GIRD开始。

由于我们的HERO JACK 同志现在主推ext-1.0（目前版本是ext-1.0-alpha3），我想我们的学习也最好从这个版本开始好了。

一个grid的生成必需依赖下列三个类，Ext.data.Store负责生成数据集，Ext.grid.ColumnModel负责显示数据，而Ext.grid.Grid则负责将这个部分进行组合。具体的用法我们看例子：
 Ext.data.Store
 Ext.grid.Grid
 Ext.grid.ColumnModel
例子1
1.引入相关包（JS和CSS）

js 代码
  1. "stylesheet" type="text/css" href="../../resources/css/ext-all.css" />   
  2.   
  3. "text/javascript" src="../../yui-utilities.js">        
  4. "text/javascript" src="../../ext-yui-adapter.js">  
  5.   
  6.   
  7. "text/javascript" src="../../ext-all.js">  


2.得到数据并生成数据集

  1. var myData = [   
  2.     ["001","001","neo","pub001001","1982-12-14 00:00:00.0","15938478221","1",25,"neo"],   
  3.     ["002","002","luna","pub001002","1983-03-11 00:00:00.0","13751596026",null,23,"lulu"],   
  4.     ["003","003","bear","pub001002",null,null,null,null,null]]   
  5.    ];   
  6.   
  7.         var ds = new Ext.data.Store({   
  8.           proxy: new Ext.data.MemoryProxy(myData),   
  9.           reader: new Ext.data.ArrayReader({id: 0}, [   
  10.    {name: 'staffId'},   
  11.                        {name: 'staffCode'},   
  12.                        {name: 'staffName'},   
  13.                        {name: 'sex'},   
  14.                        {name: 'brithday'},   
  15.                        {name: 'mobilePhone'},   
  16.                        {name: 'memo'},   
  17.                        {name: 'age'},   
  18.                        {name: 'nickname'}   
  19.                   ])   
  20.         });   
  21.         ds.load();   
  22.   

3.设置显示样式

  1. //custom renderer function   
  2. function castDate(value){   
  3.  if(value!=null)   
  4.  return   value.substring(0,10);   
  5.     else return value   
  6. }   
  7.   
  8.  var colModel = new Ext.grid.ColumnModel([   
  9.  {header: "姓名", width: 200, sortable: true, locked:false, dataIndex: 'staffName'},   
  10.  {header: "性别", width: 150, sortable: true, dataIndex: 'sex'},   
  11.  {header: "出生日期", width: 150, sortable: true,renderer: castDate, dataIndex: 'brithday'},   
  12.  {header: "年龄", width: 150, sortable: true, dataIndex: 'age'},   
  13.  {header: "手机", width: 150, sortable: true, dataIndex: 'mobilePhone'},   
  14.  {header: "备注", width: 120, sortable: true, dataIndex: 'memo'}   
  15. ]);   
  16.   

4.组合并在页面生成一个Grid

  1. //create the Grid   
  2. var grid = new Ext.grid.Grid('grid-example', {   
  3.     ds: ds,   
  4.     cm: colModel   
  5. });   
  6.  grid.render();  


 说明： 1.第一步应该没有什么大问题，只要注意加载顺序就OK了
 2.数据集的名堂很多，但我们只要抓两个要点就没问题了，一是数据从哪里来（proxy参数决定），二是怎样读取这些数据（reader参数决定）
 来源方式主要由类MemoryProxy，HttpProxy和ScriptTagProxy决定，类名表示来源方式，参数决定来源路径，这个例子用的是MemoryProxy，参数是一个数组变量名，表示数据来源于一个内存中的数组，数据来源搞定以后，我们要解析这个数据，不同的数据类型要用到不同的reader，这个例子用的是数组，所以我们要用一个ArrayReader进行解析。
 3.显示方面要注意的是renderer，当我们想让显示的数据并不完全按照得到的数据来显示时，我们就要用到这个参数，YUI-EXT提供了很多内置的renderer，当然也提供自定义的renderer，使用起来很简单，一看就会。
 4.倒子中'grid-example'中指示GRID要显示的位置，页面上的一个

 

 好像搞定了，SO EASY?
 不过实际工作中不会出现如此简单的GRID，通常的做法是要从数据库中取值再显示到GRID，想做就做，JUST DO IT!
 个人开发环境（Strust1.1+Hibernate3+tomcat5.0+jdk1.4.2）
 例子２（取数据库中的值并显示到GIRD）
 1.取数据库并将值存入FORMBEAN

java 代码
  1. Session session = HibernateUtil.getSessionFactory().getCurrentSession();    
  2.   
  3. session.beginTransaction();   
  4. List results = session.createQuery("select staff.staffId, staff.staffCode, staff.staffName, staff.sex, staff.brithday," +   
  5.   "staff.mobilePhone,staff.memo,staff.age,staff.nickname from Staff as staff").list();   
  6.   
  7. session.beginTransaction().commit();   
  8.   
  9. JSONArray ja = JSONArray.fromObject(results);   
  10.        
  11. myform.setStaffdata(ja.toString());   
  12.     
  13. return mapping.findForward("listpage");   
  14.   

２。将例１作相应改动就ＯＫ

js 代码
  2.  var myData =　eval();  


说明：真的就这么简单？？不，如果这么简单，还要程序员做什么，招几个打字员就ＯＫ了。
问题是层出不穷的。。
第一步用了一个net.sf.json.JSONArray类，这是一个开源项目，能将各种形式的数据转变成JSONArray（为什么要用JSONArray？因为JSON是javascript标准的一部分，它跟js的合作将比ＸＭL愉快），其中就包括Hibernate所比较喜欢的List.这样一来，我们就省了很多数据转化的工作，但是事实证明net.sf.json.JSONArray是个不错的轮子，却不是我们最想要的轮子。
将Hibernate查询得到的List转化成JSONArray的使用过程中会出现这样一些问题。
1.生成不同的JSONArray
相信对HIBERNATE有所了解的人都知道HQL语句"select 所有列 from Staff as staff"和"from Staff"得到的东西并不一样前一个得到的是一个Object[],而后面得到的是Staff[],将两个List转化得到的JSONArray也不一样，前一个是普通JS数组，类似[["001","001","neo"],["002","002","luna"]]而后一个得到的是一个标准的砓JSONArray,类似[{"sex":"pub001001","nickname":"neo"},{"sex":"pub001002","nickname":"lulu"}],这个问题并不难解决,在前台页面用不同的reader就OK了.
2.日期转化问题
第二个问题rocker96兄也遇到过,就是数据库中查找出的DATE对象,变成了这个死样子("brithday":{"month":11,"day":2,"year":82,"nanos":0,"time":408643200000,"seconds":0,"timezoneOffset":-480,"date":14,"hours":0,"minutes":0}),rocker96提议在前台解决,也提出过方案,不过我个人认为对于YUI-EXT这套框架,前台小姐已经够忙的了,还是在后台那帮兄弟做完的好.问题出现的原因是JSONArray没有对Date对象进行处理,决定修改JSONArray源码.代码不多,通过DEBUG找到处理的函数(Hibernate的两种查询方法所得到的不同的List所在的处理方法不同),并加上

  1. if(value instanceof Timestamp){   
  2.  System.out.println("cast date to string!");   
  3.  value = value.toString();    
  4. }  


日期变成了字符串"1982-12-14 00:00:00.0",前台再用一个renderer,搞定.

YUI及YUI所衍生YUI-EXT给我们系统重构提供一些很不错的方案,代码规范,扩展性好,又有很好的开发文档支持及数量和质量都不错的用户群,希望有一天会出现一套MY-YUI.

下次想和大家分享一下GridEditor,可编辑的GIRD

谢谢rocker96,给了我很多信息.谢谢,希望能交个朋友.


 

已有 18 人发表留言，猛击->>这里<<-参与讨论


JavaEye推荐



]]> Wed, 21 Mar 2007 19:48:00 +0800 http://neoliao.javaeye.com/blog/64418 http://neoliao.javaeye.com/blog/64418