`
wjt276
  • 浏览: 650259 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

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

json项目管理EXTJavaScriptCSS 
阅读更多

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();
	
});

 

 

 

 

 

分享到：
| Extjs3.x Struts2 -Json-plugin学习实例 - ...
评论
12 楼 烟花易冷 2010-12-16  
非常感谢楼主，看了你的文章对我帮助很大，谢谢您！
11 楼 wjt276 2010-10-29  
看来自己的小东西，以后还是放在家中的被窝中比较好，哈哈哈
10 楼 zhoudan241 2010-10-29  
人家说了只是针对入门学习～！ 你们为什么还要说楼主咧～！ 对你没用，对刚入门的人还是有学习的呀～！
9 楼 kakamimika 2010-10-28  
还是jQuery够简洁 ext ui确实很炫
8 楼 depravedangel 2010-10-28  
我以前实现过一个ExtJs的CRUD组件，虽然版本比较老，但或许对您会有一些参考意义http://depravedangel.iteye.com/blog/336707
7 楼 elan1986 2010-10-28  
站着说话不腰疼

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

谢了 楼主
6 楼 Leon.Wood 2010-10-28  
整合?谈不上整合吧 何况也没看到啥java代码
5 楼 wjt276 2010-10-28  
fhx007 写道
没看出有什么不同的，也没什么高明之处


当然没有什么不同，也没有什么新的，因为这是我的学习实例呀，我只是做个笔记，这样我可以把所有的笔记在后台做成PDF后下载。多好呀。哈哈
4 楼 gouflv 2010-10-28  
好长..应该写成组件

要是复杂的项目还这么写,单文件能上千行
3 楼 fhx007 2010-10-28  
没看出有什么不同的，也没什么高明之处
2 楼 extdev 2010-10-28  
题目写的是EXT，不是STRUTS，没见到STRUTS的身影。
看到EXT那长长的JS，晕倒
1 楼 nj_first 2010-10-28  
这个有点创意啊
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    struts2-hibernate-spring-Extjs-json.rar_JSON_extjs_extjs json st

    这个压缩包“struts2-hibernate-spring-Extjs-json.rar”显然包含了关于这些技术整合使用的参考资料。下面将详细阐述这些技术以及它们之间的交互。 1. **Struts2**： Struts2是一个基于MVC（模型-视图-控制器）...

    Extjs3.x入门学习

    本篇将基于"Extjs3.x入门学习"这一主题，深入探讨相关知识点。 1. **EXT_JS实用开发指南**： 这份文档可能包含了关于ExtJS的基本概念、架构以及开发流程的介绍，帮助初学者快速上手。可能包括如何创建基本的页面...

    extjs3.x 官方示例以及chm版api

    综上所述，"extjs3.x 官方示例以及chm版api"为开发者提供了一套完整的ExtJS 3.x 学习和开发资源，包括实际的示例应用和详细的API文档，是深入理解和掌握这一版本ExtJS的关键工具。通过学习和实践，开发者可以高效地...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容...

    Struts2 Spring2.5 Hiberante3.3.2 +ExtJS(Struts2-json)做的CRUD

    在与Struts2结合时，Struts2的JSON插件可以将服务器端的数据转换成JSON格式，方便ExtJS的组件直接使用，实现异步数据加载和页面动态更新。 总的来说，这个DEMO展示了如何将这些技术有效地整合，构建一个完整的Java ...

    struts2-extjs4.rar

    通过这个示例项目，开发者可以学习如何设置Struts2的Action来生成JSON，如何在ExtJS4中配置Ajax请求，以及如何解析和展示接收到的JSON数据。这有助于理解和掌握两者的集成技术，从而在实际项目中实现更高效的数据...

    Extjs Tree + JSON + Struts2 示例源代码

    在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树，但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包，供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...

    ExtJS实现多文件上传UploadDialog For ExtJS3.x

    在本文中，我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能，结合Struts2框架进行数据处理。首先，我们需要确保环境配置正确。在描述中提到，我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...

    extjs-json-数据转换

    使用ExtJs获取后台json格式的数据必须的七个jar包，commons-beanuti-1s-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-logging-1.0.4.jar，ezmorph-1.0.4.jar，json-lib-2.1.jar，...

    stutsspringibatis+extjs图书管理系统

    本系统所用框架 struts2 spring ibatis extjs 数据库采用sqlserver 实现图书基本管理功能,对学习这些框架的人来说是难得的资源，包占空间大大我没放进来,我把包的名称都写下来了，系统没有问题，配置跑不通自己好好...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说，这个实例展示了如何将前端的ExtJS4框架，特别是其Accordion布局和Ext.tree.Panel组件，与Servlet和Struts2后端框架集成，利用JSON进行数据交换，来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

    ExtJs + Struts2 + JSON 程序总结

    通过Struts2处理后端逻辑并返回JSON数据，EXTJS能够动态地更新页面，呈现复杂的数据结构，从而提高用户体验。这种技术栈在现代企业级Web开发中非常常见，因为它能够简化数据交互，同时保持良好的性能和可维护性。

    extjs 跟 struts+json

    标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合，通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库，用于构建富客户端Web应用程序，而Struts是Java Web开发中的一个MVC...

    ExtJS+struts2+json登陆实例--源码

    这是一个基于ExtJS、Struts2和JSON的登录实例，适合初学者学习Web应用程序开发。这个实例演示了如何将前端的JavaScript框架ExtJS与后端的Java MVC框架Struts2结合，通过JSON进行数据交换实现用户登录功能。下面将...

    Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统

    【标题】"Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统"是一个基于Java技术栈的开源项目，它利用了Struts2框架的json-plugin插件，Spring2作为服务层管理和依赖注入框架，以及ExtJS2.2作为前端展示...

    nexus-3.31.1-01-win64.zip

    Nexus是一个强大的Maven仓库管理器，它极大地简化了自己内部仓库的维护和外部仓库的访问。利用Nexus你可以只在一个地方就能够完全控制访问 和部署在你所维护仓库中的每个Artifact。Nexus是一套“开箱即用”的系统不...

    struts2+extjs+json整合实例

    1. **设置Struts2的JSON插件**：在Struts2项目中，需要添加struts2-json-plugin库，然后在struts.xml配置文件中启用JSON结果类型。 2. **创建Action类**：编写处理用户请求的Action，通常会有一个方法返回一个包含...

    @@@extjs+struts2+json plugin的例子

    此外，为了实现`ExtJS`和`Struts2`的无缝对接，开发者可能还使用了一些特定的插件或库，比如`struts2-extjs-plugin`，它可能提供了便利的配置和组件，简化了两者之间的集成工作。 综上所述，`@@@extjs+struts2+json...

    一个运用Extjs，Struts2, json，iterator技术构建的iterator_jsonDemo2。 将数据从后台传到Extjs表现层。

    一个运用Extjs，Struts2, json，iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接：http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs，Struts2, json，iterator技术， 将数据从...

    struts2 json extjs 完整实例

    struts2 json extjs 完整实例 struts2 json extjs 完整实例 完整可用 无错！ struts2 json extjs 完整实例 struts2 json extjs 完整实例 完整可用 无错！ struts2 json extjs 完整实例 struts2 json extjs 完整...

Magicbox
Global site tag (gtag.js) - Google Analytics