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

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

浏览 19532 次
锁定老帖子 主题：共同学习YUI-EXT（GIRD部分）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • neoliao
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 30
  • 来自: 深圳
   发表时间：2007-03-21  

共同学习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. <script type=< span="">"text/javascript" src="../../yui-utilities.js"></script>        
  4. <script type=< span="">"text/javascript" src="../../ext-yui-adapter.js"></script>  
  5. <!---->  
  6.   
  7. <script type=< span="">"text/javascript" src="../../ext-all.js"></script>  


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,给了我很多信息.谢谢,希望能交个朋友.


 
返回顶楼
         
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：2007-03-21  
通用生成JSON的一个方法，只要在SQL指定数据库的字段便可列出为JSON,xml也同一道理，可用于各种表导出为JSON格式 
var contact=new dbOpen();
	contact.GetSQL ="select memberID,author,address,email,postcode,tel_no,tel_no2 from order_table where id="+id;	
	with(contact){
			GetRS(1);
				var str="{\"root\":";
				str+="[";
				do{
					str+='{';
					for(var i=0;i<(rs.Fields.Count);i++){
						str+=('"'+rs.Fields(i).name+'":');
						str+=('"'+rs.Fields(i).value+'"');
						if(i!=rs.Fields.Count-1)str+=',';
					}
					str+='}';
					rs.MoveNext();
					if(!rs.EOF)str+=',';
				}while(!rs.EOF);
				str+="]}";
				Response.Write(str);
			Close();
		}
		contact=null;
返回顶楼
          回帖地址
0 请登录后投票
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：2007-03-21  
感觉只是用EXT做RIA的话，Servlet+JDBC足矣
返回顶楼
          回帖地址
0 请登录后投票
  • adablue77
  • 等级: 一星会员
  • 文章: 43
  • 积分: 126
   发表时间：2007-03-22  
可惜ext1.0没有好的插件支持
以上代码可以提供打包下载吗?谢谢
返回顶楼
          回帖地址
0 请登录后投票
  • neoliao
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 30
  • 来自: 深圳
   发表时间：2007-04-02  
个人认为单是Servlet+JDBC来实现RIA的话还是有点困难的,Struts和Hibernate的流行可以说明一些问题.
返回顶楼
          回帖地址
0 请登录后投票
  • neoliao
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 30
  • 来自: 深圳
   发表时间：2007-04-02  
adablue77 写道
可惜ext1.0没有好的插件支持
以上代码可以提供打包下载吗?谢谢

对不起,这些代码只是片断..打包下了也没有用
返回顶楼
          回帖地址
0 请登录后投票
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：2007-04-02  
这里有个原创Editable Demo：http://www.ajaxjs.com/yuicn/demos/editable_gird.asp
返回顶楼
          回帖地址
0 请登录后投票
  • tiyi
  • 等级: 四星会员
  • 文章: 198
  • 积分: 486
   发表时间：2007-04-05  
显示容易啊。取值到现在还没成功。从Ext.data.Store.getAt拿出来的不知道是什么结构的数据。
返回顶楼
          回帖地址
0 请登录后投票
  • tiyi
  • 等级: 四星会员
  • 文章: 198
  • 积分: 486
   发表时间：2007-04-05  
读了半天源码才发现是Ext.data.Record
取值用getAt(index).data.property
返回顶楼
          回帖地址
0 请登录后投票
  • xugq035
  • 等级: 一星会员
  • 文章: 99
  • 积分: 135
   发表时间：2007-04-05  
怎样用代码实现grid的刷新功能，效果跟翻页工具条上的刷新按钮一样？
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

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