Extjs4+struts2+hibernate3实现分页表格

最近一直在写基于Extjs+SSH的界面，学了不少的东西。教科书上的太繁杂，而很多大牛的博客并没有跟上包更新的速度，造成很多不错的工程没有办法直接下载配置和学习，写了关于双向1-N表的查询，用Extjs表现支持分页的表格自动读取返回的json值。本文基于http://www.cnblogs.com/yongfeng/archive/2010/10/29/1864785.html所写，由于Extjs已经升级，还有myeclipse强大的反向工程的功能写了一下的文字。

1.配置struts

    我在这个问题的上面就耽误不少的时间，用的是Myeclipse10.0自带struts2，相较于struts官网上的版本还是比较老的，正是因为这样，WebContent/lib中的struts2文件一定要与classpath中的包相同，可以在myeclipse安装文件夹中找到并复制，不然会造成class找不到的错误。

2 在Mysql中建立两个表Student和Mark

DROP TABLE IF EXISTS `test`.`student`;CREATE TABLE  `test`.`student` (  `stuid` varchar(20) NOT NULL,  `stuname` varchar(20) NOT NULL,  `stusex` varchar(20) NOT NULL,  `stuaddress` varchar(20) NOT NULL,  PRIMARY KEY (`stuid`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;DROP TABLE IF EXISTS `test`.`mark`;CREATE TABLE  `test`.`mark` (  `stuid` varchar(20) DEFAULT NULL,  `stumath` int(11) NOT NULL,  `stuchinese` int(11) NOT NULL,  `stuenglish` int(11) NOT NULL,  PRIKEY `stuid` (`stuid`),  CONSTRAINT `stuid` FOREIGN KEY (`stuid`) REFERENCES `student` (`stuid`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3 使用hibernate反向工程

3.1 转到Myeclipse Database Explorer

链接到Student和Mark表所在的数据库：参见http://www.cnblogs.com/hoojo/archive/2011/01/07/1929577.html不同的是人家用的MS SQL Server，我用的是MySQL

3.2 配置一下hibernate吧：回到MyEclipse Java Enterprise视图。右键：工程名->MyEclipse->add HibernateXXX 在第二步还是第三步的时候一定选择将包copy到lib文件夹下，省却了复制的麻烦，不然也会产生同上的错误。这样hibernate.cfg.xml也自动的生成了。可以添加一些辅助的语句还是参见：http://www.cnblogs.com/hoojo/archive/2011/01/07/1929577.html，不同的是在配置hibernate的最后一步，要把sessionFactory选中便于自动生成HibernateSessionFactory类，因为我们并不使用spring的包。

3.3 生成表的配置文件：MyEclipse的Database Explorer视图，找到连接数据库下的Student和Mark的table，右键hibernate Reverse Engineering，在弹出的对话框中将many-to-many选中（这一点我并不肯定），剩下的就交给hibernate完成吧，在scr目录下就生成了Student.hbm.xml和Mark.hbm.xml，生成了DAO文件和类文件（什么get……set……和构造函数，以及继承java.io.Serializable都有了）。同时hibernate.cfg.xml中多了

<mapping resource="XX/Mark.hbm.xml" /><mapping resource="XX/Student.hbm.xml" />

这样两条语句

4. 补充DAO文件中所缺的函数

DAO是自动生成的，无法满足查询需要的函数，借助于HQL和Query类，可以自由地查询返回我们需要的参数

public List QueryAll(int start, int limit) {Session session = HibernateSessionFactory.getSession();session.beginTransaction();String sql = "select p.stuid as stuid,p.stuname as stuname,p.stusex as stusex,p.stuaddress as stuaddress,"+ "q.stumath as stumath,q.stuchinese as stuchinese,q.stuenglish as stuenglish from Student p, Mark q where p.stuid=q.stuid";Query query = session.createQuery(sql);session.getTransaction().commit();if (query != null) {return query.setFirstResult(start).setMaxResults(limit).list();}return null;}

上面是我的查询函数，写在自己的DAO文件中，因为自动生成的只有StudentDAO和MarkDAO，而没有StudentMarkDAO

5.写Service文件， 由于只是取几个属性就不用json了（需要导入包而且经常出错），直接用String打印输出

@Overridepublic String execute() throws Exception {HttpServletResponse response = ServletActionContext.getResponse();// 编制响应的格式response.setContentType("text/html;charset=UTF-8");List<Object[]> finder = studentmark.QueryAll(getStart(), getLimit());String json = "[";for (Object[] obj: finder) {json += "{\"id\":"+"\""+(String)obj[0]+"\""+",";json += "\"stuname\":"+"\""+(String)obj[1]+"\""+",";json += "\"stusex\":"+"\""+(String)obj[2]+"\""+",";json += "\"stuadress\":"+"\""+(String)obj[3]+"\""+",";json += "\"stumath\":"+obj[4].toString()+",";json += "\"stuchinese\":"+obj[5].toString()+",";json += "\"stuenglish\":"+obj[6].toString()+"},";}json +="]";//JSONArray json = JSONArray.fromObject(finder);response.getWriter().write("{\"totalCount\":" + studentmark.FindAllRows() + ",\"data\":" + json.toString() + "}");System.out.println("{\"totalCount\":" + studentmark.FindAllRows() + ",\"data\":" + json.toString() + "}");return null;}

配置struts2.xml中的action到该Service

<action name="getnodes" class="edu.tsinghua.ada.Service.TreeService"></action>

6. Extjs做表现层

6.1 配置extjs4：Extjs4的改动还是相当大的，将包ext-all.js、bootstrap.js（代替了Extjs3中的build.js）、ext-all.css和ext-debug.js（还没用到过）导入到WebContent中，同时导入icon文件夹不然很多按钮没有图标。

6.2 写表现层

Ext.onReady(function() {    var start=0;var limit=5;    Ext.QuickTips.init();        // setup the state provider, all state information will be saved to a cookie    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));    /**     * Custom function used for column renderer     * @param {Object} val     */    var store = Ext.create('Ext.data.Store', {        id:'simpsonStore',        autoLoad: false,        fields: [            {name: 'id',      type: 'string'},            {name: 'stuname',      type: 'string'},            {name: 'stusex',     type: 'string'},            {name: 'stuaddress',  type: 'string'},            {name: 'stumath', type: 'int'},            {name: 'stuchinese', type: 'int'},            {name: 'stuenglish', type: 'int'},        ],        pageSize: limit,        proxy: {            type: 'ajax',            url : 'showdata.action',            reader: {               type: 'json',               root: 'data',               totalProperty: 'totalCount'            }        }    });    store.load({        params:{            start:0,             limit:limit        }    });    // create the Grid    Ext.create('Ext.grid.Panel', {        title: '学生信息',        store: store,        columns: [            {text: '学号', width: 75, sortable: true, dataIndex: 'id'},            {text: '学生姓名', width: 75, sortable : true, dataIndex: 'stuname'},            {text: '学生性别', width: 75, sortable : true, dataIndex: 'stusex'},            {text: '学生地址', width: 75, sortable : true, dataIndex: 'stuaddress'},            {text: '数学成绩', width: 85, sortable : true, dataIndex: 'stumath'},            {text: '语文成绩', width: 85, sortable : true, dataIndex: 'stuchinese'},            {text: '英语成绩', width: 85, sortable : true, dataIndex: 'stuenglish'}        ],        height: 200,        width: 600,        renderTo: 'grid-example',        dockedItems: [{            xtype: 'pagingtoolbar',            store: store,   // same store GridPanel is using            dock: 'bottom',            displayInfo: true        }]    });});

在语法上Extjs4比较3更新了很多。

showdata.action通过store中的url与action关联起来，同时找到Service

结语：很简单的程序，自己属于入门级，看了几天的struts2和hibernate，Spring没有怎么看，就开始上手写这个程序了。写的时候参考了很多的博客，以此文分享给大家，期望大家多批评指正。源程序很如果需要请留言！