当设置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 中，本文的代码见附件

   

评论

1 楼 li1989a 2015-12-10  

lazyHibernate_extjs_base.js 是什么啊