Extjs3.x Struts2 -Json-plugin学习范例 -User管理页面

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" class="x-hidden">
  </body>
</html>

user.js

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',//隐藏必须的id
						hiddenName:'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} 条&nbsp;&nbsp;共 {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();
	
});

1 楼 nj_first 2010-10-28

这个有点创意啊

2 楼 extdev 2010-10-28

题目写的是EXT，不是STRUTS，没见到STRUTS的身影。
看到EXT那长长的JS，晕倒

3 楼 fhx007 2010-10-28

没看出有什么不同的，也没什么高明之处

4 楼 gouflv 2010-10-28

好长..应该写成组件

要是复杂的项目还这么写,单文件能上千行

5 楼 wjt276 2010-10-28

fhx007 写道

没看出有什么不同的，也没什么高明之处

当然没有什么不同，也没有什么新的，因为这是我的学习实例呀，我只是做个笔记，这样我可以把所有的笔记在后台做成PDF后下载。多好呀。哈哈

6 楼 Leon.Wood 2010-10-28

整合?谈不上整合吧何况也没看到啥java代码

7 楼 elan1986 2010-10-28

站着说话不腰疼

自己做的时候又是另外一回事了！

谢了楼主

8 楼 depravedangel 2010-10-28

我以前实现过一个ExtJs的CRUD组件，虽然版本比较老，但或许对您会有一些参考意义http://depravedangel.iteye.com/blog/336707

9 楼 kakamimika 2010-10-28

还是jQuery够简洁 ext ui确实很炫

10 楼 zhoudan241 2010-10-29

人家说了只是针对入门学习～！你们为什么还要说楼主咧～！对你没用，对刚入门的人还是有学习的呀～！

11 楼 wjt276 2010-10-29

看来自己的小东西，以后还是放在家中的被窝中比较好，哈哈哈

12 楼烟花易冷 2010-12-16

非常感谢楼主，看了你的文章对我帮助很大，谢谢您！

Extjs3.x Struts2 -Json-plugin学习范例 -User管理页面 - 完 07