没使用mvc之前的extjs4.2登录及extjs4.2的crud代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="/mbs1/js/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="/mbs1/js/ext/bootstrap.js"></script> <script type="text/javascript" src="/mbs1/js/ext/locale/ext-lang-zh_CN.js"></script> <!--定义全局JS变量--> <script type="text/javascript">var GLOBAL_ROOT_PATH="/mbs1";</script> <style type="text/css"> html,body{ height: 100%; width: 100%; margin: 0px; padding: 0px; } </style> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ var win; Ext.define('com.xxx.model.user', { extend: 'Ext.data.Model', alias : 'model.user', idProperty:'userId', fields: [ {name: 'userId', type: 'int'}, {name: 'loginName', type: 'string'}, {name: 'realName', type: 'string'}, {name: 'email', type: 'string'}, {name: 'phone', type: 'string'}, {name: 'status', type: 'int'} ] }); Ext.define('com.xxx.store.user', { alias:'store.user', extend: 'Ext.data.Store', model: 'com.xxx.model.user', proxy: { type: "ajax", url: GLOBAL_ROOT_PATH+"/user/listbypage", actionMethods : { create : "POST", read : "POST", update : "POST", destroy : "POST" }, api: { read: GLOBAL_ROOT_PATH+"/user/listbypage", create: 'bookCreate.php', update: GLOBAL_ROOT_PATH+"/user/edit", destroy: 'bookDestroy.php' }, reader: { type: "json", root: 'listData', totalProperty: 'totalRecordCount' } }, pageSize: 3, sorters: [{ property: 'user_id', direction: 'ASC' }], autoLoad: false }); store_object=new com.xxx.store.user(); store_object.loadPage(1); var mypagingtoolbar=Ext.create('Ext.toolbar.Paging',{ store: store_object, dock: 'bottom', displayMsg: '显示 {0} - {1} 条,共计 {2} 条', emptyMsg: "没有数据", afterPageText: "页 共{0}页", beforePageText: "第", displayInfo: true }); Ext.create('Ext.grid.Panel', { title: '用户信息浏览', tbar : [ { xtype : 'button', text : '新增', handler : function(){ var add_form=Ext.create('com.xxx.view.user.addform'); win = new Ext.Window({ layout:'border', title:'新增数据', modal:true, width:400, height:200, closeAction:'destroy', plain: true, items:[add_form] }); win.down('form').getForm().reset(); win.show(this); } }], store: store_object, columnLines : true, forceFit : true, columns: [ {text: '用户id', dataIndex:'userId'}, {text: '登录名称', dataIndex:'loginName'}, {text: '真实姓名', dataIndex:'realName'}, { xtype:'actioncolumn', width:60, items: [{ icon: GLOBAL_ROOT_PATH+'/css/img/edit.png', // Use a URL in the icon config tooltip: 'Edit', handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); var edit_form=Ext.create('com.shinowit.view.user.editform'); win = new Ext.Window({ title:'数据编辑', layout:'border', width:400, height:200, closeAction:'destroy', modal:true, plain: true, items:[edit_form] }); win.down('form').loadRecord(rec); win.show(this); } },{ icon:GLOBAL_ROOT_PATH+ '/css/img/delete.gif', tooltip: 'Delete', handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); Ext.MessageBox.confirm("提示","您确定要删除这些信息吗?",function(button,text){ if (button=='yes'){ Ext.Ajax.request({ url: GLOBAL_ROOT_PATH+'/user/del', params: { id: rec.get('userId') }, success: function(response){ var text = response.responseText; var jsonObj=eval("("+text+")"); if (true==jsonObj.success){ Ext.Msg.alert('成功', jsonObj.msg); Ext.getStore(store_object).reload(); }else{ Ext.Msg.alert('失败', jsonObj.msg); } } }); } }); } }] } ], width: '100%', height:'100%', dockedItems: [ mypagingtoolbar ], renderTo: Ext.getBody() }); Ext.define('com.xxx.view.user.editform', { extend:'Ext.form.FormPanel', bodyStyle:'padding-top:20px;padding-left:20px;', defaultType:'textfield', labelAlign:'right', width:'auto', height : 150, frame : true, buttonAlign:'center', defaults : { allowBlank : false, autowidth : true, labelAlign:'right', width : 399 }, items:[ {xtype: 'hiddenfield',name: 'userId', value: ''}, {fieldLabel:'登录名称',name:'loginName',height:20,blankText:'请输入登录名称'}, {fieldLabel:'真实姓名',name:'realName', height:20,blankText:'请输入真实姓名'} ], buttons:[ {xtype:'button',text:'重输',handler:function(){this.up("form").getForm().reset();}}, {xtype:'button',text:'保存',handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url:GLOBAL_ROOT_PATH+'/user/edit', waitTitle : '提示',//标题 waitMsg : '正在提交数据请稍候...',//提示信息 success: function(form, action) { if (true==action.result.success){ Ext.Msg.alert('成功', action.result.msg); //var start=mypagingtoolbar.cursor; //得到当前记录指针 //var limit=mypagingtoolbar.pageSize; //得到每页要显示的记录数 //Ext.getStore(store_object).load({params:{start:start,limit:limit}}); Ext.getStore(store_object).reload(); win.close(); //关闭编辑框 }else{ Ext.Msg.alert('错误', action.result.msg); } }, failure: function(form, action) { Ext.Msg.alert('错误', action.result.msg); } }); //record =form.getRecord(), //获取表单数据元素 //values = form.getValues(); //获取该表单值 //record.set(values); //修改当前的值 //Ext.getStore(store_object).sync(); //record.commit(); //win.close(); //关闭编辑框 } }} ] }); Ext.define('com.xxx.view.user.addform',{ extend:'Ext.form.FormPanel', bodyStyle:'padding-top:5px;padding-left:5px;', defaultType:'textfield', labelAlign:'right', width:'auto', height : 150, width:390, frame : true, buttonAlign:'center', defaults : { allowBlank : false, autowidth : true, labelAlign:'right', width : 299 }, items:[ {xtype: 'hiddenfield',name: 'userId', value: ''}, {fieldLabel:'登录名称',name:'loginName',height:20,blankText:'请输入登录名称'}, {fieldLabel:'真实姓名',name:'realName', height:20,blankText:'请输入真实姓名'} ], buttons:[ {xtype:'button',text:'重输',handler:function(){this.up("form").getForm().reset();}}, {xtype:'button',text:'保存',handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url:GLOBAL_ROOT_PATH+'/user/add', waitTitle : '提示',//标题 waitMsg : '正在提交数据请稍候...',//提示信息 success: function(form, action) { if (true==action.result.success){ Ext.Msg.alert('成功', action.result.msg); Ext.getStore(store_object).reload(); win.close(); //关闭编辑框 }else{ Ext.Msg.alert('错误', action.result.msg); } }, failure: function(form, action) { Ext.Msg.alert('错误', action.result.msg); } }); //record =form.getRecord(), //获取表单数据元素 //values = form.getValues(); //获取该表单值 //record.set(values); //修改当前的值 //Ext.getStore(store_object).sync(); //record.commit(); //win.close(); //关闭编辑框 } }} ] }); }); </script> </body> </html>
package com.xxx.web.controller; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.xxx.dao.mapper.SysUserMapper; import com.xxx.model.SysUser; import com.xxx.model.SysUserCriteria; @Controller @RequestMapping(value="/user") public class UserController { private static final Logger logger = Logger.getLogger(UserController.class); @Resource private SysUserMapper sys_user_dao; @RequestMapping(value="/listbypage") @ResponseBody public Map<String,Object> listByPage(@RequestParam("start") int start,@RequestParam("limit") int pageSize,@RequestParam("page") int pageIndex){ Map<String,Object> result=new HashMap<String,Object>(); SysUserCriteria ex=new SysUserCriteria(); ex.setPageSize(pageSize); ex.setPageIndex(pageIndex); ex.setOrderByClause("user_id"); List<SysUser> list_data=null; try { list_data=sys_user_dao.selectPage(ex); result.put("listData", list_data); if (logger.isDebugEnabled()){ logger.debug("取得分页结果记录行数:"+list_data.size()); } } catch (Exception e) { if (logger.isDebugEnabled()){ logger.error(e.getMessage(), e); } result.put("success", false); result.put("msg", "保存失败!数据库操作异常!"); result.put("totalRecordCount", 0); result.put("listData", list_data); return result; } //取得满足查询条件的记录总数 try { int record_count=sys_user_dao.countByExample(ex); result.put("totalRecordCount", record_count); } catch (Exception e) { result.put("totalRecordCount", 0); if (logger.isDebugEnabled()){ logger.error(e.getMessage(), e); } } return result; } @RequestMapping(value="/add") @ResponseBody public Map<String,Object> add(SysUser user){ Map<String,Object> result=new HashMap<String,Object>(); int rec_changed=0; try { rec_changed=sys_user_dao.insert(user); } catch (Exception e) { if (logger.isDebugEnabled()){ logger.error(e.getMessage(), e); } result.put("success", false); result.put("msg", "保存失败!数据库操作异常!"); return result; } if (rec_changed>0){ result.put("success", true); result.put("msg", "保存成功!"); }else{ result.put("success", false); result.put("msg", "保存失败!"); } return result; } @RequestMapping(value="/edit") @ResponseBody public Map<String,Object> edit(SysUser user){ Map<String,Object> result=new HashMap<String,Object>(); int rec_changed=0; try { rec_changed=sys_user_dao.updateByPrimaryKey(user); } catch (Exception e) { if (logger.isDebugEnabled()){ logger.error(e.getMessage(), e); } result.put("success", false); result.put("msg", "保存失败!数据库操作异常!"); return result; } if (rec_changed>0){ result.put("success", true); result.put("msg", "保存成功!"); }else{ result.put("success", false); result.put("msg", "保存失败!"); } return result; } @RequestMapping(value="/del") @ResponseBody public Map<String,Object> del(@RequestParam("id") Integer userId){ Map<String,Object> result=new HashMap<String,Object>(); int rec_changed=0; try { rec_changed=sys_user_dao.deleteByPrimaryKey(userId) ; } catch (Exception e) { if (logger.isDebugEnabled()){ logger.error(e.getMessage(), e); } result.put("success", false); result.put("msg", "删除失败!数据库操作异常!"); return result; } if (rec_changed>0){ result.put("success", true); result.put("msg", "删除成功!"); }else{ result.put("success", false); result.put("msg", "删除失败!"); } return result; } }
以下为登录的extjs
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //以下自定义一个vtype输入校验规则 Ext.apply(Ext.form.field.VTypes, { //使用正则表达式 validcode:function(value,field){ var regEx=/^\d{4}$/; //4位数字 return regEx.test(value); }, validcodeText:"请输入正确的验证码", validcodeMask:/[0-9-]/ //限制键盘的输入 }); var login_form=new Ext.create('Ext.form.FormPanel',{ bodyStyle:'padding-top:20px;padding-left:20px;', defaultType:'textfield', labelAlign:'right', width:'auto', height : 150, frame : true, buttonAlign:'center', defaults : { allowBlank : false, autowidth : true, labelAlign:'right', width : 210, vtype:'alphanum' //缺省只能输入字母和数字 }, items:[ {fieldLabel:'登录名称',id:'loginName',name:'loginName',height:20,blankText:'请输入登录名称'}, {fieldLabel:'登录密码',id:'loginPass',name:'loginPass',inputType:'password', height:20,blankText:'请输入登录密码'}, {fieldLabel:'校验码',id:'validCode',name:'validCode',vtype:'validcode', width : 180,height:20,blankText:'请输入校验码',minLength:4,maxLength:4,minLengthText:'校验码不能少于4个',maxLengthText:'校验码不能多于4个数字'} ], buttons:[ {xtype:'button',text:'重输',handler:function(){this.up("form").getForm().reset();}}, {xtype:'button',text:'登录',handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url:GLOBAL_ROOT_PATH+'/login/checklogin', waitTitle : '提示',//标题 waitMsg : '正在提交数据请稍候...',//提示信息 success: function(form, action) { window.location.href=action.result.mainurl; //Ext.Msg.alert('成功', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('错误', action.result.msg); } }); } }} ] }); var login_window=new Ext.create('Ext.window.Window',{ title:'用户登录', width : 300, collapsible:false, closable:false, resizable:false, modal:true, draggable:false, shadow :true, items:[login_form] }); login_window.show(); //创建验证码 Ext.core.DomHelper.insertAfter( Ext.get('validCode'), { tag: 'img', id:'checkimg', name:'checkimg', src: GLOBAL_ROOT_PATH+'/html/validcode.jsp?id='+new Date().getTime(), align: 'absbottom', style: 'position: absolute;left: 200px;top: 70px;' } ); Ext.get('checkimg').on({ 'click':{fn:function(){ this.src=GLOBAL_ROOT_PATH+'/html/validcode.jsp?id='+new Date().getTime(); }}}); });
相关推荐
在"extjs4mvc的crud"这个主题中,我们将深入探讨如何使用ExtJS 4的Model-View-Controller(MVC)架构来实现货物处理的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。 首先,了解MVC模式是...
包括了extjs crud php增、删、改、查操作,是Extjs入门的一个极好的实例。
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...
Hibernate+Spring+Struts2+ExtJS开发CRUD功能
ExtJS4-CRUD ExtJS 4 MVC CRUD 教程演示了使用 sencha 的 ExtJS 4 框架和 MVC 使用 ExtJS Grid 创建/读取/更新/删除记录(书籍)。 在我的博客上阅读全文。 输出: 在任何浏览器中打开 HTML 文件,输出将类似于下...
在ExtJS中,CRUD操作是通过Grid Panel、Form Panels等组件实现的,这通常涉及到模型(Model)、存储(Store)和控制器(Controller)的协同工作。 本示例是关于如何在ExtJS中实现CRUD操作的一个教程。首先,我们从...
【s2sh ExtJS开发CRUD功能】是指使用Struts2、Spring和Hibernate这三大开源框架,结合ExtJS前端库来实现数据的创建(Create)、读取(Retrieve)、更新(Update)和删除/Delete)操作。这个组合常被称为s2sh架构,是Java ...
### SSH+ExtJS开发CRUD功能详解:从理论到实践 #### 核心知识点概览 在《ssh+extjs开发crud--经典》这一主题下,我们深入探讨如何结合SSH框架(即Struts2、Spring、Hibernate)与ExtJS前端框架来实现CRUD操作(即...
### SSH+ExtJS 开发CRUD功能:深入解析与实践指南 #### 一、引言与框架概述 在软件开发领域,尤其是企业级应用开发中,整合多种技术框架以实现高效、灵活的功能构建已经成为常态。其中,“SSH”(即Struts2、...
### Struts2+Spring+Hibernate+ExtJS 开发 CRUD 功能详解 #### 一、概述 在企业级应用开发中,结合使用 Struts2、Spring、Hibernate 和 ExtJS 框架来实现 CRUD (Create、Read、Update、Delete) 功能是一种非常常见...
在IT行业中,构建Web应用程序是常见的任务,而“Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例”提供了一个完整的解决方案,用于快速开发基于Java的Web应用,特别是涉及数据库操作的CRUD(创建、读取、更新、删除...
在IT领域,SSH+ExtJS实现的CRUD(Create, Read, Update, Delete)操作是Web应用程序开发中的常见任务,通常用于构建数据管理界面。SSH指的是Struts2、Hibernate和Spring这三个开源Java框架的组合,而ExtJS则是一个...
"Extjs-crud" 涉及的核心概念是CRUD(Create, Read, Update, Delete)操作,这是数据库管理中的基本操作,对应于创建、读取、更新和删除数据。在ExtJS中,这些操作通常与数据网格(grid)组件结合使用,为用户提供...
### Hibernate+Spring+Struts2+ExtJS集成开发CRUD功能 #### 一、技术栈介绍与环境搭建 **1. Hibernate:** Hibernate是一个强大的对象关系映射(ORM)框架,用于简化Java应用程序与数据库之间的交互。通过...
本项目是关于使用Java服务器页面(JSP)和Servlet技术,结合ExtJS前端框架,实现数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete),也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例,...
用的extjs是3.4版,在新的extjs4.2环境下不能运行,费了好大劲,终于搞定。期间到laz英文论坛提问,可能跟我英文差有关吧,一个回答的都没有。搞定后,版主又要我进行了“ open a new issue in the bugtracker and ...