日期:2014-05-16  浏览次数:20351 次

当设置lazy=true时,怎样使用extjs和Hibernate
   extjs是早期富客户用的比较多的框架,目前大家也都在使用。Hibernate是目前大部分公司都在使用的ORM映射工具。本来他们之间没有什么联系,但当他们结合在一起时就会出现各式各样的问题。如果你正在使用Hibernate和extjs,关注一下这篇文章应该对你大有益处。
    
    1)从http://code.google.com/p/rich-hibernate-lazy/downloads/list 下载相关的文档和jar文件。
注:后台如何搭建,请参照里面的中文文档,如果还不明白,请参照demo,这里只介绍前台extjs如何搭建。
    2)下载extjs,并放在相应的目录,同时把css和js文件添加到相应的目录,如下所示:
<link href="../js/extjs/resources/css/ext-all.css" rel="stylesheet"
			type="text/css" />
		<script src="../js/extjs/ext-all.js" type="text/javascript">
</script>

   3)添加lazyHibernate,开源并且没有添加版权的的js文件,代码如下所示:
    
	<script type="text/javascript"
			src="../js/afuer/lazyHibernate_js_base.js">
</script>

		<script type="text/javascript"
			src="../js/afuer/lazyHibernate_extjs_base.js">
</script>

  4)添加跟后台对应的model类:
   
Ext.define('User', {
		extend : 'Ext.data.Model',
		fields : [ {
			name : 'id',
			type : 'int'
		}, {
			name : 'username',
			type : 'string'
		}, {
			name : 'roles<0>_name',
			type : 'string'
		}, {
			name : 'organization_name',
			type : 'string'
		} ]
	});

  注: roles<0>_name 表达的是关联关系,roles[0].name

   5)添加extjs的特殊的store存储类:
   
var store1 = Ext.create('Ext.data.Store', {
			model : 'User',
			autoLoad : true,
			proxy : Ext.create('LazyHibernate.LazyAjax', {
				url : "listForExtjs"
			})

		});

   注: 'LazyHibernate.LazyAjax' 为lazyHibernate创建。

  6)把store给datagrid panel即可:
   
var grid = Ext.create('Ext.grid.Panel', {
			renderTo : Ext.getBody(),
			store : store1,
			width : 1000,
			height : 200,
			title : 'Show users with Lazy Hibernate in ExtJS',
			columns : [ {
				text : 'Name',
				width : 100,
				sortable : false,
				hideable : false,
				dataIndex : 'username'
			}, {
				text : 'ID ',
				flex : 1,
				dataIndex : 'id'
			}, {
				text : 'roleName, field base on  roles<0>_name ',
				flex : 1,
				dataIndex : 'roles<0>_name'
			}, {
				text : 'roleName, field base on roles[0].name',
				flex : 1,
				dataIndex : 'roles[0].name'
			}, {
				text : 'Org Name, field base on organization_name',
				flex : 1,
				dataIndex : 'organization_name'
			}

			]
		});


注:这样extjs不但可以使用懒加载,而且datagrid可以直接使用关联关系的属性。甚至1对多都可以用。因为RichLazyHibernate为顶端架构,所以看起来好像步骤有些多,如果你对Hibernate和extjs很熟悉,则觉得这部分代码异常简单,只需要配置一下就可以使用。代码位于demo的/userview/base_extjs_test1.jsp 中,本文的代码见附件