浏览 1601 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-05-02
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 中,本文的代码见附件 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |