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

neoliao

浏览: 3557 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (0)

社区版块

存档分类

2007-03 ( 1)
更多存档...

EXT YUI json Hibernate JavaScript

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

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

分享到：

2007-03-21 19:48
浏览 12251
评论(18)
论坛回复 / 浏览 (18 / 19531)
分类:Web前端
查看更多

18 楼 wangxin0072000 2007-09-04

请问Gird有打印功能吗？

17 楼 victor1017 2007-05-11

var myData =　eval();
上面这句的()是什么意思啊？
我现在就是无法显示返回来的数据，但可以肯定数据已经到客户端了。

16 楼 yishh 2007-04-12

各位有发现 grid有内存泄露吗?
我用drip测试了下,发现是有的.
是0.33的版本,1.0的不知道,没试过.

15 楼 unifly 2007-04-12

想问一下YUI-EXT支持复杂表头(包括行合并、列合并)的行列固定么？

14 楼 rautinee 2007-04-10

据说YUI-EXT新版本中grid部分改动很大，我有点吃不准，后来还是选择了dhtmlxgrid

13 楼 btbirdy 2007-04-10

sp42 写道

btbirdy 写道

grid上能加右键菜单吗，像yuidatatable那样的

可以我们群里面的朋友已经做出来了

能贴出来看看吗，我在扒代码呢，好痛苦

12 楼 sp42 2007-04-10

btbirdy 写道

grid上能加右键菜单吗，像yuidatatable那样的

可以我们群里面的朋友已经做出来了

11 楼 btbirdy 2007-04-10

grid上能加右键菜单吗，像yuidatatable那样的

10 楼 xugq035 2007-04-05

自己解决了:-)
最简单的办法是调用PagingToolbar.loading.onClick();

9 楼 xugq035 2007-04-05

怎样用代码实现grid的刷新功能，效果跟翻页工具条上的刷新按钮一样？

8 楼 tiyi 2007-04-05

读了半天源码才发现是Ext.data.Record
取值用getAt(index).data.property

7 楼 tiyi 2007-04-05

显示容易啊。取值到现在还没成功。从Ext.data.Store.getAt拿出来的不知道是什么结构的数据。

6 楼 sp42 2007-04-02

这里有个原创Editable Demo：http://www.ajaxjs.com/yuicn/demos/editable_gird.asp

5 楼 neoliao 2007-04-02

adablue77 写道

可惜ext1.0没有好的插件支持
以上代码可以提供打包下载吗?谢谢

对不起,这些代码只是片断..打包下了也没有用

4 楼 neoliao 2007-04-02

个人认为单是Servlet+JDBC来实现RIA的话还是有点困难的,Struts和Hibernate的流行可以说明一些问题.

3 楼 adablue77 2007-03-22

可惜ext1.0没有好的插件支持
以上代码可以提供打包下载吗?谢谢

2 楼 sp42 2007-03-21

感觉只是用EXT做RIA的话，Servlet+JDBC足矣

1 楼 sp42 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;

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论