Extjs3.x Struts2 -Json-plugin学习实例 -User管理页面 - 完 07
user_list.jsp
?
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>用户管理</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"><script type="text/javascript" src="extjs/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script><script type="text/javascript" src="extjs/radiogroup.js"></script><link rel="stylesheet" type="text/css" href="extjs/examples.css" /><script type="text/javascript" src="extjs/examples.js"></script><script type="text/javascript" src="user.js"></script><script type="text/javascript"></script> </head> <body> <div id="dept"></div> <div id="topic-win" name="code">var _reader = new Ext.data.JsonReader({root:"users"},[ {name:"id",type:"int",mapping:"id"}, {name:"name",type:"string",mapping:"name"}, {name:"username",type:"string",mapping:"username"}, {name:"password",type:"string",mapping:"password"}, {name:"sex",type:"boolean",mapping:"sex"}, {name:"phone",type:"string",mapping:"phone"}, {name:"tel",type:"string",mapping:"tel"}, {name:"url",type:"string",mapping:"url"}, {name:"email",type:"string",mapping:"email"}, {name:"deptId",type:"int",mapping:"dept.id"}, {name:"deptName",type:"string",mapping:"dept.name"}, {name:"address",type:"string",mapping:"address"}, {name:"description",type:"string",mapping:"description"} ]);var user_store = new Ext.data.Store({baseParams:{start:0,limit:20},sortInfo:{field:"id",dirction:"asc"},//autoLoad:true,remoteSort:true,proxy:new Ext.data.HttpProxy({url:"user.action",method:"POST"}),reader:_reader});var _sm = new Ext.grid.CheckboxSelectionModel();var user_cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), _sm, {header:"ID",width:40,dataIndex:"id",sortable:true,algin:"center"}, {header:"用户名",width:60,dataIndex:"username",sortable:true}, {header:"姓名",width:60,dataIndex:"name",sortable:true}, {header:"性别",width:40,dataIndex:"sex",sortable:true,align:"center", renderer:function(_value){ if(_value){ return '男'; } else { return '女'; } } }, {header:"部门",width:70,dataIndex:"deptName",sortable:true}, {header:"联系电话",width:90,dataIndex:"phone",sortable:true}, {header:"移动电话",width:90,dataIndex:"tel",sortable:true}, {header:"电子邮件",width:110,dataIndex:"email",sortable:true, renderer:function(_value){ return '<a href="mailto:' + _value + '" ext:qtip="' + _value + '">' + Ext.util.Format.ellipsis(_value, 15) + '</a>'; } }, {header:"联系地址",width:120,dataIndex:"address",sortable:true,renderer:function(_value){return '<span ext:qtip="' + _value + '">' + Ext.util.Format.ellipsis(_value, 12) + '</span>';} }, {header:"描述",dataIndex:"description",id:"description"} ]); var addOrModify = function(_url, _id){var deptCombo_store = new Ext.data.Store({reader:new Ext.data.JsonReader({root:'depts'}, Ext.data.Record.create([{name:'id',type:'int',mapping:'id'},{name:'name',type:'string',mapping:'name'}])),proxy:new Ext.data.HttpProxy({url:'dept',method:'POST'}),//autoLoad:true,listeners:{'load':function(){/*if(_id){var comb = Ext.getCmp('deptCombo');var _rec = user_grid.getSelectionModel().getSelected();if(comb){comb.setValue(_rec.get('deptId'));}}*/}}});new Ext.Window({id:'addOrModifyWin',title:'用户信息',width:380,autoHeight:true,//height:250,resizable:false,modal:true,animateTarget:'addUser',closeAction:'close',listeners:{'show':function(){btn_add.disable();btn_modify.disable();},'close':function(){btn_add.enable();btn_modify.enable();}},items:[{xtype:'form',id:'addOrModifyForm',layout:'form',labelWidth:70,labelAlign:'right',labelPad:10,frame:true,border:false,waitMsgTarget:true,bodyStyle:"padding:5px 5px 0",defaultType:'textfield',defaults:{width:230,msgTarget:'side'//验证信息显示在右边},items:[{xtype:'hidden',name:'user.id',value:0},{fieldLabel:'用户名',name:'user.username',allowBlank:false,emptyText:'请输入用户名',},{inputType:'password',fieldLabel:'用户密码',name:'user.password',allowBlank:false},{fieldLabel:'姓名',name:'user.name',allowBlank:false,blankText:'姓名不能为空'},{xtype:'ux-radiogroup',fieldLabel:'性别',id:'sex',name:'user.sex',horizontal:true,radios:[{name:'sex',boxLabel:'男 ',value:true,checked:true},{name:'sex',boxLabel:'女',value:false}]},{xtype:'panel',layout:'column',width:380,items:[{columnWidth:.76,layout:'form',labelWidth:70,labelAlign:'right',labelPad:10,items:[{xtype:'combo',id:'deptCombo',fieldLabel:'所属部门',maxHeight:110,anchor: '99%',allowBlank:false,blankText:'必须选择部门',editable:false,//禁止编辑hideTrigger:false,//隐藏后面的那个下拉图片按钮，这在只读模式下浏览数据有用loadingText:'正在加载信息……',//加载信息时显示的提示信息emptyText:'请选择部门',typeAhead:true,//在输入时，是否把第一个匹配项自动选择到文本框中forceSelection:true,//必须选择一项(强制)hiddenField:'deptId',//隐藏必须的idhiddenName:'dept.id',//hiddenName才是提交至后台的input的name //name只是下拉列表的名称triggerAction: "all",//单击触发按钮显示全部数据(不根据输入框中的数据进行过滤)store:deptCombo_store,mode:'remote',//remote数据从远程获取;local为本地数据displayField: 'name',//要显示的字段valueField: "id"//实际值字段}]},{columnWidth:.24,layout:'form',items:[{xtype:'button',//text:'刷新',iconCls:'icon-btn-refresh',tooltip:'重新获取部门列表',handler:function(){deptCombo_store.reload();}}]}]},{fieldLabel:'联系电话',name:'user.phone',allowBlank:false,emptyText:'请输入联系电话',regex:/^\d{3,4}-?\d{7,9}$/,regexText:'请正确填写您的电话号码,格式如：<br/>010-123456'},{fieldLabel:'移动电话',name:'user.tel',regex:/^(((1[3-9]{1}[0-9]{1})|(15[0-9]{1}))+\d{8})$/,regexText:'请输入有效的手机号'},{fieldLabel:'电子邮件',name:'user.email',vtype:'email'},{fieldLabel:'个人博客',name:'user.url',vtype:'url'},{xtype:'textarea',fieldLabel:'联系地址',height:40,name:'user.address'},{xtype:'textarea',fieldLabel:'备注',height:40,name:'user.description'}]}],buttonAlign:'center',minButtonWidth:60,buttons:[{text:'提交',tooltip:'提交数据',handler:function(){var _userForm = Ext.getCmp('addOrModifyForm').getForm();if(_userForm.isValid()){_userForm.submit({url:_url,method:'POST',waitTitle:'请稍候',waitMsg:'正在提交数据，请稍候……',success:function(form,action){Ext.example.msg('提示','数据提交成功……','msg-box-success');Ext.getCmp('addOrModifyWin').close();user_grid.getStore().reload();},failure:function(form,action){Ext.example.msg('警告',"原因：" + action.result.msg,'msg-box-error');}});} else {Ext.example.msg('警告','数据验证失败，请核对……','msg-box-error');}}},{text:'重置',tooltip:'重置表单数据',handler:function(){Ext.getCmp('addOrModifyForm').getForm().reset();}},{text:'取消',handler:function(){Ext.getCmp('addOrModifyWin').close();//this.ownerCt.ownerCt.close();}}]}).show();if(_id){var _userForm = Ext.getCmp('addOrModifyForm').getForm();_userForm.reader = new Ext.data.JsonReader({root:"user"},[ {name:"user.id",type:"int",mapping:"id"}, {name:"user.name",type:"string",mapping:"name"}, {name:"user.username",type:"string",mapping:"username"}, {name:"user.password",type:"string",mapping:"password"}, {name:"user.sex",type:"boolean",mapping:"sex"}, {name:"user.phone",type:"string",mapping:"phone"}, {name:"user.tel",type:"string",mapping:"tel"}, {name:"user.url",type:"string",mapping:"url"}, {name:"user.email",type:"string",mapping:"email"}, {name:"dept.id",type:"int",mapping:"dept.id"}, //{name:"deptName",type:"string",mapping:"dept.name"}, {name:"user.address",type:"string",mapping:"address"}, {name:"user.description",type:"string",mapping:"description"} ]);_userForm.load({url:'user!findUserById',waitMsg:'正在截入数据……',params:{'user.id':_id},success:function(form, action){Ext.example.msg('提示','数据加载成功……','msg-box-success');},failure:function(form,action){Ext.example.msg("警告","数据加载失败，请核对……","msg-box-error");Ext.getCmp('addOrModifyWin').close();}});}} var btn_add = new Ext.Button({text:"添加",tooltip:"添加一个新的用户记录",id:"addUser",iconCls:'icon-btn-add',handler:function(){Ext.example.msg("提示","你点击了添加用户按钮","");new addOrModify('user!add');}});var btn_modify = new Ext.Button({text:"编辑",tooltip:"编辑用户信息",iconCls:'icon-btn-edit',handler:function(){var _selectModel = user_grid.getSelectionModel();if(_selectModel.hasSelection()){var _rec = _selectModel.getSelected();new addOrModify('user!modify',_rec.get('id'));} else {Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error");}}});var btn_delete = new Ext.Button({text:"删除",tooltip:"删除选择的用户记录",iconCls:'icon-btn-delete',handler:function(){var _selectModel = user_grid.getSelectionModel();if(_selectModel.hasSelection()){//var _rec = _selectModel.getSelected();Ext.Msg.confirm('确认删除','你确定删除所有选择用户的记录吗？',function(_btn){if(_btn == 'yes'){var ids = [];var _recs = _selectModel.getSelections();for(var i = 0; i < _recs.length; i++){ids[i] = _recs[i].get('id');}//alert(ids.join(','));Ext.Ajax.request({waitMsg:'正在删除数据，请稍候……',url:'user!delete',params:{ids:ids.join(',')},success:function(action){Ext.example.msg('提示','数据删除成功……','msg-box-success');user_grid.getStore().reload();},failure:function(action){Ext.example.msg('提示','数据删除失败，请核对 ……','msg-box-error');}});}});//new addOrModify('user!modify',_rec.get('id'));} else {Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error");}}}); var user_grid = new Ext.grid.GridPanel({id:'userGridPanel',loadMask:{msg:'数据正在加载中,请稍候……'},region:'center',columnLines:true,cm:user_cm,sm:_sm,trackMouseOver:true,frame:true,autoExpandColumn:"description",tbar:[btn_add,"-",btn_modify,"-",btn_delete],store:user_store,bbar:new Ext.PagingToolbar({store:user_store,pageSize:20,displayInfo:true,displayMsg:"第 {0} - {1} 条 共 {2} 条",emptyMsg:"没有记录"})});Ext.onReady(function(){Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";Ext.QuickTips.init(); var viewPort = new Ext.Viewport({layout : 'fit',items : [user_grid] }); user_store.load();});?
?
?
?
?
5 楼 wjt276 2010-10-28 fhx007 写道没看出有什么不同的，也没什么高明之处