当设立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文件添加到相应的目录，如下所示：

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

   

查看更多 下一篇