共同学习YUI-EXT（GIRD部分）

阅读更多

共同学习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 代码

"stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

"text/javascript" src="../../yui-utilities.js">
"text/javascript" src="../../ext-yui-adapter.js">


"text/javascript" src="../../ext-all.js">

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

var myData = [
    ["001","001","neo","pub001001","1982-12-14 00:00:00.0","15938478221","1",25,"neo"],
    ["002","002","luna","pub001002","1983-03-11 00:00:00.0","13751596026",null,23,"lulu"],
    ["003","003","bear","pub001002",null,null,null,null,null]]
   ];

        var ds = new Ext.data.Store({
          proxy: new Ext.data.MemoryProxy(myData),
          reader: new Ext.data.ArrayReader({id: 0}, [
   {name: 'staffId'},
                       {name: 'staffCode'},
                       {name: 'staffName'},
                       {name: 'sex'},
                       {name: 'brithday'},
                       {name: 'mobilePhone'},
                       {name: 'memo'},
                       {name: 'age'},
                       {name: 'nickname'}
                  ])
        });
        ds.load();

3.设置显示样式

//custom renderer function
function castDate(value){
 if(value!=null)
 return   value.substring(0,10);
    else return value
}

 var colModel = new Ext.grid.ColumnModel([
 {header: "姓名", width: 200, sortable: true, locked:false, dataIndex: 'staffName'},
 {header: "性别", width: 150, sortable: true, dataIndex: 'sex'},
 {header: "出生日期", width: 150, sortable: true,renderer: castDate, dataIndex: 'brithday'},
 {header: "年龄", width: 150, sortable: true, dataIndex: 'age'},
 {header: "手机", width: 150, sortable: true, dataIndex: 'mobilePhone'},
 {header: "备注", width: 120, sortable: true, dataIndex: 'memo'}
]);

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

//create the Grid
var grid = new Ext.grid.Grid('grid-example', {
    ds: ds,
    cm: colModel
});
 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 代码

Session session = HibernateUtil.getSessionFactory().getCurrentSession();

session.beginTransaction();
List results = session.createQuery("select staff.staffId, staff.staffCode, staff.staffName, staff.sex, staff.brithday," +
  "staff.mobilePhone,staff.memo,staff.age,staff.nickname from Staff as staff").list();

session.beginTransaction().commit();

JSONArray ja = JSONArray.fromObject(results);

myform.setStaffdata(ja.toString());

return mapping.findForward("listpage");

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

js 代码

 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所在的处理方法不同),并加上

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

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

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

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

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