Hibernate+Spring+Struts2+ExtJS开发CRUD功能（3）

floger
浏览: 213484 次
性别:
来自: 北京
最近访客更多访客>>

pursuer
骑着狼放羊Eagle
cjp472
oniffer
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
extjs
Spring Hibernate EXT JavaScript json
配置spring，添加：

<bean id="LevelService" parent="baseTransactionProxy">

       <property name="target">

           <bean class="privilege.service.LevelService">

              <property name="dao">

                  <bean class="privilege.dao.LevelDAO">

                     <property name="sessionFactory" ref="sessionFactory" />

                  </bean>

              </property>

           </bean>

       </property>

    </bean>

    <bean id="LevelAction" class="privilege.action.LevelAction">

       <property name="levelService" ref="LevelService" />

    </bean>

配置struts.xml: 

添加操作配置：

<action name="AddLevel" class="LevelAction" method="persistLevel">

    <result>/resource/json_struts2.jsp</result>

</action>

修改时载入数据操作配置：

<action name="LoadLevel" class="LevelAction" method="findLevelById">

    <result>/resource/json_struts2.jsp</result>

</action>

列表查询和删除数据时操作配置：

<action name="LevelAjaxJsonData" class="LevelAction" method="jsonExecute">

    <result>/resource/json_struts2.jsp</result>

</action>

 

 json_struts2.jsp :

这个页面是一个公用的页面，服务器段向客户端传输时用于JSON字符串的输出，特别注意的是：

<s:property>标签的escape属性一定要是false，默认是true，不然输出的JSON字符串被转码。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%>

<s:property value="jsonString" escape="false" />

 

Level.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>页面</title>

导入所需要的javascript类库和样式表：

<link rel="stylesheet" type="text/css" href="/my/resource/ext2.0/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="/my/resource/ext2.0/init.css" />

<script src="/my/resource/ext2.0/adapter/ext/ext-base.js" type="text/javascript"></script>

<script src="/my/resource/ext2.0/ext-core.js" type="text/javascript"></script>

<script src="/my/resource/ext2.0/ext-all.js"  type="text/javascript"></script>

Init.jsp是自定义的javascript文件，这里有一些需要动态处理的内容，所以以jsp后缀名的方式导入，这个文件的内容可以参考Extjs解压后目录中examples/examples.js文件：

<script src="/my/resource/ext2.0/init.jsp"  type="text/javascript"></script>

<script src="/my/resource/ext2.0/source/locale/ext-lang-zh_CN.js"  type="text/javascript"></script>

Level.js是整个界面所写的js：

<SCRIPT type="text/javascript" src="Level.js"></SCRIPT>

<SCRIPT type="text/javascript">

Ext.BLANK_IMAGE_URL = /my/resource/ext2.0/resources/images/default/s.gif';

</SCRIPT>

 

<STYLE type="text/css">

.ss {

    text-align: left;;

}

.icon-grid {

    background-image: url(grid.png) !important;

}

.add {

    background-image: url(new.png) !important;

}

.edit {

    background-image: url(edit.png) !important;

}

.remove {

    background-image: url(del.png) !important;

}

</STYLE>

</head>

<body class="x-vista">

<div id="topic-grid"></div>

 

 

<div id="topic-win" class="x-hidden">

<div class="x-window-header">Hello Dialog</div>

<div id="topic-tabs"></div>

</div>

</body>

</html>

 

Level.js文件：

myinit();//初始化

Ext.onReady(function() {

    Ext.QuickTips.init();

    var newFormWin;

    var form1;

//定义一个JsonReader对象，用于表格列表数据显示，即grid对象

    var _jsonReader = new Ext.data.JsonReader( {

        root : 'list',

        totalProperty : 'totalCount',

        id : 'levelid',

        successProperty : '@success'

    }, [ {

        name : 'levelid',

        mapping : 'levelid',

        type : 'int'

    }, {

        name : 'levelname',

        mapping : 'levelname'

    }, {

        name : 'description',

        mapping : 'description'

    }]);

    // Store对象，注意proxy配置参数，如果url : 'LevelAjaxJsonData.action'与程序在同一应用下面，就用new Ext.data.HttpProxy，如果不在同一应用中要用Ext.data.ScriptTagProxy对象

        var ds = new Ext.data.Store( {

            proxy : new Ext.data.HttpProxy( {

                url : 'LevelAjaxJsonData.action'

            }),

            //

            reader : _jsonReader

        });

        ds.setDefaultSort('levelid', 'desc');//设置默认的排序字段

 

        // ColumnModel对象，用于grid对象中的列格式化配置

        var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {

            id : 'levelid',

            header : '序号',

            dataIndex : 'levelid',

            width : 40

        }, {

            header : "级别名称",

            dataIndex : 'levelname',

            width : 50,

            sortable : true,

            locked : false

        }, {

            header : "描述",

            dataIndex : 'description',

            width : 100

        }]);

        // by default columns are sortable

        cm.defaultSortable = true;

// GridPanel对象

        var grid = new Ext.grid.GridPanel( {

            // var grid = new Ext.grid.EditorGridPanel( {

            collapsible : true,// 是否可以展开

            animCollapse : false,// 展开时是否有动画效果

            title : '级别管理',

            iconCls : 'icon-grid',

            store : ds,

            cm : cm,

            renderTo : 'topic-grid',

            viewConfig : {

                forceFit : true

            },

            /*

             * // 添加内陷的按钮 buttons : [ { text : '保存' }, { text : '取消' }],

             * buttonAlign : 'center',// 按钮对齐

             * 

             */

            // 添加分页工具栏

            bbar : new Ext.PagingToolbar( {

                pageSize : 30,

                store : ds,

                displayInfo : true,

                displayMsg : '显示 {0}-{1}条 / 共 {2} 条',

                emptyMsg : "无数据。",

                items : ['-', {

                    pressed : true,

                    enableToggle : true,

                    text : '按钮',

                    cls : 'x-btn-text-icon details',

                    toggleHandler : ptb_bt1

                }]

            }),

            // 添加内陷的工具条

            tbar : [ {

                id : 'New1',

                text : ' 新建  ',

                tooltip : '新建一个表单',

                iconCls : 'add',

                handler : function() {

                    ptb_bt1();

                }

            }, '-', {

                text : '修改',

                tooltip : '修改',

                iconCls : 'edit',

                handler : function() {

                    ptb_bt2();

                }

            }, '-', {

                text : '删除',

                tooltip : '删除被选择的内容',

                iconCls : 'remove',

                handler : function() {

                    ptb_bt3();

                }

            }],

            width : 700,

            height : 400,

            frame : true,

            loadMask : true,// 载入遮罩动画

            autoShow : true

        });

//数据载入

        ds.load( {

            params : {

                start : 0,//开始数

                limit : 30,//每次载入数量，服务器段就根据这两个参数来处理数据分页

                forumId : 4

            }

        });

        grid.render();

//添加行双击事件，双击是可以打开修改窗口

        grid.on("rowdblclick", function(grid) {

            loadFormData(grid);

        });

        // 载入被选择的数据行的表单数据

        var loadFormData = function(grid) {

            var _record = grid.getSelectionModel().getSelected();

            if (!_record) {//这里判断是否有行已经被选择

                Ext.example.msg('修改操作', '请选择要修改的一项！');

            } else {

                myFormWin();

                form1.form.load( {

                    url : 'LoadLevel.action?level.levelid='

                            + _record.get('levelid'),

                    waitMsg : '正在载入数据...',

 

                    failure : function() {

                        Ext.example.msg('编辑', '载入失败');

                    },

                    success : function() {

                        Ext.example.msg('编辑', '载入成功！');

                    }

                });

            }

        }

        // 分页工具栏按钮--新建事件

        var ptb_bt1 = function() {

            myFormWin();

        };

        // 修改操作事件

        var ptb_bt2 = function() {

            loadFormData(grid);

        };

        // 删除事件

        var ptb_bt3 = function() {

            var _record = grid.getSelectionModel().getSelected();

            if (_record) {//判断是否有行被选择

                Ext.MessageBox.confirm('确认删除', '你确认要删除这条数据吗？', function(btn) {

                    if (btn == "yes") {

                        var m = grid.getSelections();//所有被选择的行

                        var jsonData = "";//

                        for (var i = 0, len = m.length;i < len; i++) {

                            var ss = m[i].get("levelid");

                            if (i == 0) {

                                jsonData = jsonData + ss;

                            } else {

                                jsonData = jsonData + "," + ss;

                            }

                            ds.remove(m[i]);

                        }

                        ds.load( {

                            params : {

                                start : 0,

                                limit : 30,

                                delData : jsonData//这里是向服务器段发送的数据信息，一般采用JSON协议，这儿直接采用，只发送用逗号分割的ID号序列， 以方便

                            }

                        });

 

                        // Ext.example.msg('---删除操作---', '你删除的数据是');

                    }

                });

            } else {

                Ext.example.msg('删除操作', '请选择要删除的数据项！');

            }

        };

 

        // form_win定义一个Window对象，用于新建和修改时的弹出窗口。

        var myFormWin = function() {

            // create the window on the first click and reuse on subsequent

            // clicks

            if (!newFormWin) {

                newFormWin = new Ext.Window( {

                    el : 'topic-win',

                    layout : 'fit',

                    width : 400,

                    height : 300,

                    closeAction : 'hide',

                    plain : true,

                    title : '窗口',

                    items : form1,

                    reader : _jsonReader

                });

            }

            newFormWin.show('New1');

        }

//用窗体Form的JsonReader对象，修改时数据载入解析

        var _jsonFormReader = new Ext.data.JsonReader( {

            root : 'list',

            totalProperty : 'totalCount',

            id : 'levelid',

            successProperty : '@success'

        }, [ {

            name : 'level.levelid',

            mapping : 'levelid',

            type : 'int'

        }, {

            name : 'level.levelname',

            mapping : 'levelname'

        }, {

            name : 'level.description',

            mapping : 'description'

        }]);

 

        // 窗体

        form1 = new Ext.FormPanel( {

            // collapsible : true,// 是否可以展开

            labelWidth : 75, // label settings here cascade unless overridden

            url : 'AddLevel.action',

            frame : true,

            title : '添加级别',

            bodyStyle : 'padding:5px 5px 0',

            width : 350,

            waitMsgTarget : true,

            reader : _jsonFormReader,

            defaults : {

                width : 230

            },

            defaultType : 'textfield',

            items : [ {

                fieldLabel : '级别ID',

                name : 'level.levelid',

                allowBlank : false

            }, {

                fieldLabel : '级别名称',

                name : 'level.levelname',

                allowBlank : false

            }, new Ext.form.TextArea( {

                fieldLabel : '描述',

                name : 'level.description',

                growMin : 234

            })],

 

            buttons : [ {

                text : '保存',

                disabled : false,

                handler : function() {

                    if (form1.form.isValid()) {

                        form1.form.submit( {

                            url : 'AddLevel.action',

                            success : function(from, action) {

                                Ext.example.msg('保存成功', '添加级别成功！');

                                ds.load( {

                                    params : {

                                        start : 0,

                                        limit : 30,

                                        forumId : 4

                                    }

                                });

                            },

                            failure : function(form, action) {

                                Ext.example.msg('保存失败', '添加级别失败！');

                            },

                            waitMsg : '正在保存数据，稍后...'

                        });

                        dialog.hide();

                    } else {

                        Ext.Msg.alert('信息', '请填写完成再提交!');

                    }

                }

            }, {

                text : '取消',

                handler : function() {

                    newFormWin.hide();

                }

            }]

        });
分享到：
java中定时任务执行 | Hibernate+Spring+Struts2+ExtJS开发CRUD功 ...
2009-07-02 11:20
浏览 2516
评论(0)
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Hibernate+Spring+Struts2+ExtJS开发CRUD功能（3）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Hibernate+Spring+Struts2+ExtJS开发CRUD功能（3）

评论

发表评论

相关推荐

ext lovcombo的使用

Ext JS 中实现自定义验证 密码修改 确认密码

Ext中经常用到的VTypes的自定义扩展集。

整合EXT JS 和 SSH2框架

Hibernate+Spring+Struts2+ExtJS开发CRUD功能（2）

Hibernate+Spring+Struts2+ExtJS开发CRUD功能（1）

最近访客更多访客>>

Ext JS 中实现自定义验证密码修改确认密码
