当设立lazy=true时,怎样使用extjs和Hibernate
当设置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文件添加到相应的目录,如下所示:
3)添加lazyHibernate,开源并且没有添加版权的的js文件,代码如下所示:
4)添加跟后台对应的model类:
注: roles<0>_name 表达的是关联关系,roles[0].name
5)添加extjs的特殊的store存储类:
注: 'LazyHibernate.LazyAjax' 为lazyHibernate创建。
6)把store给datagrid panel即可:
注:这样extjs不但可以使用懒加载,而且datagrid可以直接使用关联关系的属性。甚至1对多都可以用。因为RichLazyHibernate为顶端架构,所以看起来好像步骤有些多,如果你对Hibernate和extjs很熟悉,则觉得这部分代码异常简单,只需要配置一下就可以使用。代码位于demo的/userview/base_extjs_test1.jsp 中,本文的代码见附件
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 中,本文的代码见附件