extjs3 用户管理 页面

最新推荐文章于 2021-06-30 13:08:30 发布
置顶 最新推荐文章于 2021-06-30 13:08:30 发布
阅读量1k 收藏 1
点赞数
分类专栏： EXTJS 文章标签： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuemingyuan88/article/details/47959199
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8" %>
<%@include  file="/webapp/systempublic/common.jsp" %>
<html>
  	<head>
	    
	    <title>客户清单管理</title>
	    
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="../resources/Datetime2.js"></script>
		<script type="text/javascript">
		var orgGrid;	//系统用户GRID
		var store;
		var check;
		var rolestore;
		
		Ext.onReady(function(){
			Ext.QuickTips.init();
			var myMask = new Ext.LoadMask(Ext.getBody(), {
				msg : "正在处理数据,请稍候..."     
			});
		
		rolestore = new Ext.data.Store({
				proxy: new Ext.data.HttpProxy({url: '<%=basepath%>/usermanage/queryrolemanage.action'}),  
				reader: new Ext.data.JsonReader(
				{   
				    totalProperty:"total",
	    			root:"data"
	  			}, 
	  			[
	  				{name:'ROLEID', mapping:'ROLEID',type:'string'},
	  				{name:'NAME', mapping:'NAME',type:'string'}
	  			]
	  			),
				listeners:{
					load: loadStoreError                //JsonStore执行好触发的事件
				} 
			});
		
		store = new Ext.data.Store({
				proxy: new Ext.data.HttpProxy({url: '<%=basepath%>/usermanage/queryusermanage.action'}),  
				reader: new Ext.data.JsonReader(
				{   
	    			totalProperty:"total",
	    			root:"data"
	  			}, 
	  			[
	  				{name:'USERID', mapping:'USERID', type:'string'},
	  				{name:'NAME', mapping:'NAME',type:'string'},
	  				{name:'STATUS', mapping:'STATUS',type:'int'},
	  				{name:'ROLEID', mapping:'ROLEID',type:'string'},
	  				{name:'ROLENAME', mapping:'ROLENAME',type:'string'}
	  			]
	  			),
				listeners:{
					load: loadStoreError                //JsonStore执行好触发的事件
				} 
			});
	    	store.on("beforeload",storeLoadFun);
	    	function storeLoadFun(storeObj){
				//if(Ext.getCmp('ORG_NAME') != null){
				//	storeObj.baseParams.orgName = Ext.getCmp('ORG_NAME').getValue();
				//}
				//if(Ext.getCmp('synchronizationEpgis') != null){
				//	storeObj.baseParams.synchronizationEpgis = Ext.getCmp('synchronizationEpgis').getValue();
				//}
	    	};
	    	
			check = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
			
			orgGrid = new Ext.grid.GridPanel({
				renderTo:Ext.getBody(),
				title:"<center>数据查询</center>",
				loadMask: {msg:'正在加载数据，请稍侯……'},
				stripeRows: true, 
				bodyStyle:'width:100%',
				viewConfig: {forceFit: true},
				autoScroll:true,
				//disableSelection:true,
				sm:check,
	        	store: store,
				columns:[check,{
			            header:'用户编号',
			            align: 'center',
			            dataIndex: 'USERID',
			            width: 80,
			            sortable: false
		            },{
			            header: '用户名',
			            align: 'center',
			            dataIndex: 'NAME',
			            width: 120,           
		            	sortable: true
		            	//renderer: changeSf
		        	},
		        	{
			            header: '关联编号角色',
			            align: 'center',
			            dataIndex: 'ROLEID',
			            width: 120,           
		            	sortable: true
		            	//renderer: changeSf
		        	},
		        	{
			            header: '关联角色名称',
			            align: 'center',
			            dataIndex: 'ROLENAME',
			            width: 120,           
		            	sortable: true
		            	//renderer: changeSf
		        	},
		        	{
			            header: '用户状态',
			            align: 'center',
			            dataIndex: 'STATUS',
			            width: 120,           
		            	sortable: true,
		            	renderer: changeStatus
		        	}
		        	],
		            tbar: new Ext.Toolbar({
					items:[
					{
						xtype:"button",
						text:"添加",
						tooltip:"添加",
						iconCls:'addIcon'
						,handler:addUser				
					},{
						text: '删除',
						tooltip:"删除",
						iconCls:'deleteIcon',
			        	handler:deleteUser	        	
					},{
						text:"修改",
						tooltip:"有且仅能选择一条修改数据",
						iconCls:'modifyIcon',
						handler:updateUser				
					}]        	
                    }),
		        	listeners:{"render": function(){
		        		
		      		}
	        	}
	        
			});
			
			//给orgGrid加监听事件
			new Ext.KeyMap(orgGrid.getEl(), [{
		           key: 13,
		      	   fn: btnSearchClick
			}]);
	
			store.load();	
			
			//设置Grid充满整个窗体
		    orgGrid.setWidth(Ext.getBody().getWidth()); 
		    orgGrid.setHeight(Ext.getBody().getHeight()); 
	});	
			
			
	  //保存
	  function addUser()
	  {
	      var addUserWin;
	      var addUserbar;
	      var addUserForm;
	  
	      addUserForm = new Ext.form.FormPanel
			({
			  	autoWidth:true,
			  	autoHeight:true,
			  	method:"POST",
			  	labelWidth:100,
			  	layout:"form",
			  	labelAlign:"right",
			  	frame:true,	
			  	bodyStyle:'padding:5px 5px 5px 5px',
		        items: [{
				                    xtype:'textfield',
				                    fieldLabel: "用户名称<span style='color:red;'>*</span>",
				                    id:'name',
				                    name: 'NAME',
				                    maxLength:16,
				                    maxLengthText:"用户名称不能超过16个字符",
				                    allowBlank:false,
				                    blankText:'用户名称不能为空',	                    
				                    anchor:'95%'
				               },
				               {
				                    xtype:'textfield',
				                    fieldLabel: "用户密码<span style='color:red;'>*</span>",
				                    id:'password',
				                    name: 'PASSWORD',
				                    maxLength:8,
				                    maxLengthText:"系用户密码描述不能超过8个字符",
				                    allowBlank:false,
				                    blankText:'系用户密码描述不能为空',	                    
				                    anchor:'95%'
				               },
				               {
				                    xtype:'combo',
				                    fieldLabel: "用户状态<span style='color:red;'>*</span>",
				                    id:'status',
				                    name: 'STATUS',
				                    allowBlank:false,
				                    anchor:'95%',
				                    editable:false,
						  		    triggerAction:"all",
						  		    mode:'local',
				                    valueField: 'value',
          							displayField: 'name',
				                    store:new Ext.data.SimpleStore({
		                         			fields:["value","name"],
		                         			data:[['1','正常'],['2','已删除']]
		                                   })
				               },
				               {
				                    fieldLabel: "角色编号",
				                    id:'roleid',
				                    name: 'ROLEID',
				                    allowBlank: false,
				                    xtype: 'hidden'
				               },
				               {
				                    xtype:'combo',
				                    fieldLabel: "角色名称<span style='color:red;'>*</span>",
				                    id:'rolename',
				                    name: 'ROLENAME',
				                    allowBlank: true,
				                    mode: 'remote',	                    
				                    anchor:'95%',
				                    store:rolestore,
				                    triggerAction:"all",
				                    editable:false,
				                    valueField: 'ROLEID',
          							displayField: 'NAME',
          							blankText: '请选择角色',	                    
				                    emptyText: '请选择角色',
				                    listeners:{//添加一个监听事件
         										'select':function(com,record,op) { //选择的时候的事件
         										      //alert(op);
         										      //alert(record.data.ROLEID);
         										      Ext.getCmp('roleid').setValue(record.data.ROLEID)
          										      //var va = Ext.getCmp('roleid').getValue(); 
		  										}
		  							}
				               }] 
		   });
		   
	     addUserbar = new Ext.Toolbar({
				items:[
				{
				  	text:"提交",
				  	tooltip:"提交记录后返回列表界面"	,
					iconCls:'addIcon',
					handler: addUserSubmit									
				},{
				  	text:"返回",
				  	tooltip:"返回列表界面",
					iconCls:'addIcon',
					handler: closeAddUserWin		      	
				}]        	
			});
		
		 
	    //示例化一个添加窗口
		addUserWin = new Ext.Window({
				title: "用户信息维护",
				plain: true, 
				height:200,
				width: 600, 
				modal: true, //模式窗体 
				// onEsc: Ext.emptyFn, 
				closeAction: "close",
				items: [addUserForm,addUserbar] 						
		});  
	    rolestore.on("beforeload",loadFun);
	    rolestore.load();
	    addUserWin.show();
	    
	    function closeAddUserWin(){
   		   addUserWin.close(); //窗体关闭
         } 
	    
	    
	    function addUserSubmit()
	    {
	        addUserForm.form.submit({
				url: 'updateuser.action',
				params:{
				    //userid:addUserForm.findById("userid").getRawValue(),
					name : addUserForm.findById("name").getRawValue(),
					status:addUserForm.findById("status").getRawValue(),
					roleid:addUserForm.findById("roleid").getRawValue(),
					rolename:addUserForm.findById("rolename").getRawValue(),
					password:addUserForm.findById("password").getRawValue()
				},
				waitTitle: "请稍候",
				waitMsg: "正在提交表单数据,请稍候.........",
				success: function(action, form){	
				    Ext.Msg.alert('提示', '数据保存或更新成功！');	
					store.reload();
				    closeAddUserWin();	
				},
				failure: function(action,form){
					if(form.result.msg == null || form.result.msg.toString().length == 0){
						Ext.Msg.alert('错误', '数据保存失败！');
					}else{
						Ext.Msg.alert('错误', form.result.msg);
					}
				}     	
    	      });   
	    }
	  }
	  
	  function loadFun(obj)
	  {
	  }
	  
	  //删除
	  function deleteUser()
	  {
	    var selections = orgGrid.getSelectionModel().getSelections();
		
		if(selections.length == 0){
	    	Ext.Msg.alert("提示", '请选择一行或多行数据进行删除。');
	    	return;
	    }
	    Ext.MessageBox.confirm("提示", '您确定要删除所选的用户吗?',function(btnId){
	    	if(btnId == 'yes'){
	    		 var userIdList = "";
			     for(var i = 0; i < selections.length; i++){
			    	userIdList += selections[i].get("USERID") + ",";       //用于获得用户所选的userId
			     }
	    		deleteJZNS(userIdList);
	    	}
	    })
   	}
	
	function deleteJZNS(userIdList)
	{
		//myMask.show();//加载提示信息
		Ext.Ajax.request({
			url:'<%=basepath%>/usermanage/deleteuser.action',
			params:{
				userIdList: userIdList
			},
			success:function(response,option){
			    if(response.responseText == "" || response.responseText.length == 0){
					Ext.Msg.alert('提示',"加载失败！没有获得后台的任何信息");
				}else{
				    Ext.Msg.alert('提示',"删除成功.");
				    store.reload();
				}
			},
			failure:function(action,form){
				Ext.Msg.alert('提示',"删除失败！没有与服务器连接！");
			}
		});
	 }
		
	  //修改用户信息
      function updateUser()
      { 
			var selections = orgGrid.getSelectionModel().getSelections();
			if(selections.length != 1)
			{
				Ext.Msg.alert('提示',"请选择一行系统参数进行修改！");
				return;
			}
			
		  var addUserWin;
	      var addUserbar;
	      var addUserForm;
	  
	      addUserForm = new Ext.form.FormPanel
			({
			  	autoWidth:true,
			  	autoHeight:true,
			  	method:"POST",
			  	labelWidth:100,
			  	layout:"form",
			  	labelAlign:"right",
			  	frame:true,	
			  	bodyStyle:'padding:5px 5px 5px 5px',
		        items: [{
				            	id:'userid',
							  	name: 'USERID',
							  	fieldLabel: '用户编号',
							  	xtype: 'hidden'
							  },
				               {
				                    xtype:'textfield',
				                    fieldLabel: "用户名称<span style='color:red;'>*</span>",
				                    id:'name',
				                    name: 'NAME',
				                    maxLength:16,
				                    maxLengthText:"用户名称不能超过16个字符",
				                    allowBlank:false,
				                    blankText:'用户名称不能为空',	                    
				                    anchor:'95%'
				               },
				               {
				                    xtype:'textfield',
				                    fieldLabel: "用户密码<span style='color:red;'>*</span>",
				                    id:'password',
				                    name: 'PASSWORD',
				                    maxLength:8,
				                    maxLengthText:"系用户密码描述不能超过8个字符",
				                    allowBlank:false,
				                    blankText:'系用户密码描述不能为空',	                    
				                    anchor:'95%'
				               },
				               {
				                    xtype:'combo',
				                    fieldLabel: "用户状态<span style='color:red;'>*</span>",
				                    id:'status',
				                    name: 'STATUS',
				                    allowBlank:false,
				                    anchor:'95%',
				                    editable:false,
						  		    triggerAction:"all",
						  		    mode:'local',
				                    valueField: 'value',
          							displayField: 'name',
				                    store:new Ext.data.SimpleStore({
		                         			fields:["value","name"],
		                         			data:[['1','正常'],['2','已删除']]
		                                   })
				               },
				               {
				                    fieldLabel: "角色编号",
				                    id:'roleid',
				                    name: 'ROLEID',
				                    allowBlank: false,
				                    xtype: 'hidden'
				               },
				               {
				                    xtype:'combo',
				                    fieldLabel: "角色名称<span style='color:red;'>*</span>",
				                    id:'rolename',
				                    name: 'ROLENAME',
				                    allowBlank: true,
				                    mode: 'remote',	                    
				                    anchor:'95%',
				                    store:rolestore,
				                    triggerAction:"all",
				                    editable:false,
				                    valueField: 'ROLEID',
          							displayField: 'NAME',
          							blankText: '请选择角色',	                    
				                    emptyText: '请选择角色',
				                    listeners:{//添加一个监听事件
         										'select':function(com,record,op) { //选择的时候的事件
         										      //alert(op);
         										      //alert(record.data.ROLEID);
         										      Ext.getCmp('roleid').setValue(record.data.ROLEID)
          										      //var va = Ext.getCmp('roleid').getValue(); 
		  										}
		  							}
				               }] 
		   });
		   
	     addUserbar = new Ext.Toolbar({
				items:[
				{
				  	text:"提交",
				  	tooltip:"提交记录后返回列表界面"	,
					iconCls:'addIcon',
					handler: addUpdateUserSubmit									
				},{
				  	text:"返回",
				  	tooltip:"返回列表界面",
					iconCls:'addIcon',
					handler: closeAddUserWin		      	
				}]        	
			});
		
		 
	    //示例化一个添加窗口
		addUserWin = new Ext.Window({
				title: "用户信息维护",
				plain: true, 
				height:200,
				width: 600, 
				modal: true, //模式窗体 
				// onEsc: Ext.emptyFn, 
				closeAction: "close",
				items: [addUserForm,addUserbar] 	
				});
		    
			rolestore.on("beforeload",loadFun);
	        rolestore.load();
			
	     	//建立系统参数管理窗体
	    	//createSysParaWin(userId);
	    	//对窗体中的部分信息进行修正 
	    	Ext.getCmp('userid').setValue(selections[0].get("USERID")); 
	    	Ext.getCmp('name').setValue(selections[0].get("NAME")); 
	    	Ext.getCmp('status').setValue(selections[0].get("STATUS")); 
	    	Ext.getCmp('roleid').setValue(selections[0].get("ROLEID"));
	    	Ext.getCmp('rolename').setValue(selections[0].get("ROLENAME"));
	    	 
	    	addUserWin.show(); 
	    	addUserWin.setTitle('修改用户信息');
			//addSysParaWin.show();  
			
		function closeAddUserWin(){
   		   addUserWin.close(); //窗体关闭
         }  
         function addUpdateUserSubmit()
         {
         	closeAddUserWin();	
         	
    		if(!addUserForm.form.isValid()){
    			Ext.Msg.alert('提示', '录入有误！请填写完整。');
    			return false;
    			}  	
    		addUserForm.form.submit({
				url: 'updateuser.action',
				params:{
				    userid:addUserForm.findById("userid").getRawValue(),
					name : addUserForm.findById("name").getRawValue(),
					status:addUserForm.findById("status").getRawValue(),
					roleid:addUserForm.findById("roleid").getRawValue(),
					rolename:addUserForm.findById("rolename").getRawValue(),
					password:addUserForm.findById("password").getRawValue()
				},
				waitTitle: "请稍候",
				waitMsg: "正在提交表单数据,请稍候.........",
				success: function(action, form){	
				    Ext.Msg.alert('提示', '数据保存或更新成功！');	
					store.reload();
				    closeAddUserWin();	
				},
				failure: function(action,form){
					if(form.result.msg == null || form.result.msg.toString().length == 0){
						Ext.Msg.alert('错误', '数据保存失败！');
					}else{
						Ext.Msg.alert('错误', form.result.msg);
					}
				}     	
    		});   	
         }  
        }
    
	 	
	    function resize(){
		    //设置Grid充满整个窗体
	    	orgGrid.setWidth(Ext.getBody().getWidth()); 
	    	orgGrid.setHeight(Ext.getBody().getHeight());
		}
		
		function changeStatus(value){
			if(value == "1"){
				return "正常";
			}else if(value == "2"){
			    return "已删除";
			}else{
				return "";
			}
		}
		function changeSf(value){
			if(value == "0"){
				return "否";
			}else if(value == "1"){
			    return "是";
			}else{
				return "";
			}
		}
		
		function btnSearchClick(){
	 		if(Ext.getCmp("0").getRawValue().trim().length >16)
			{
				Ext.MessageBox.alert("提示","单位名称不能超过16个字节。");
			}
			else
			{
				//store.reload({params:{start:0,limit:20}});
			}	
	 	}
	 	
		</script>
  	</head>
  	<body οnresize="resize();">
    </body>
</html>

传说中的大神
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs的登录页面
03-28
用extjs4写的登录页面，希望对你有用，适合初学者
ExtJS3 简单主页面 构
专栏
07-23 206
一. 页面JSP代码如下   &lt;% String userName = (String)request.getAttribute("username"); %&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="content-type" cont
extjs 4.1 用户管理控制层代码
03-01 1328
本文最只有控制层的代码，界面设计部分看前一篇博客。 用户管理界面业务逻辑有点复杂，本人花了将近一周的时间才将所有代码完善，其中参考了很多资料，也借鉴一些别人的东西，这中间遇到了很多问题，很感谢很多网友将自己的经验发表出来供他人学习，我之前做pb开发的时候很少发表博客，遇到不会的到就到网上找别人的解决方法，感觉很应该将自己的东西拿出来也供别人学习和借鉴，同时也可以将知识梳理一遍，对自己对别人都有益
extjs实现用户登录界面
03-18
extjs用户登录界面 博文链接：https://hyj0903.iteye.com/blog/691273
ExtJS6.2开发-用户管理(一)
砌墙民工的博客
01-26 296
一、创建主页目录 1)在app目录下创建main\core\user目录 2)在user目录下分别创建view、viewmodel、controller、component目录 建立好的文件目录如下图： 二、创建查询页文件 １.view\MaCrUser.js文件代码如下： Ext.define('AppCenter.main.core.user.view.MaCrUser',{ exte...
extjs3 简单grid 页面
weixin_30291791的博客
08-24 168
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="/webapp/systempublic/common.jsp" %> <% String bingcount = (String)req...
extjs3和extjs4的区别
qq_36573925的博客
06-14 1627
布局1.ComponentLayout 布局在响应调整大小的请求时，复杂组件运用ComponentLayout来完成内部元素的定型。比如FieldLayout管理组件中的标签和输入元素的尺寸和位置。2.FormLayout在EXT JS4中不再使用FormLayout。3.BorderLayoutEXT JS4中的BorderLayout完全兼容EXT JS3。面板标题垂直定向，所以东、西区域被替...
Extjs的页面布局及树节点的联动
qq_45398309的博客
01-02 383
最近在公司接触到了Extjs这个框架，学的真是头发稀脑袋大呀！下面带来在学习中自己写的一个实例。 此例子是用6的版本所写。大家参考的时候注意哦！因为Extjs版本之间的个别方法属性有着细微差别。 Extjs 在这之前简短说一下这个框架的优缺点吧。 优点：相关js封装的很好，界面很简洁，对于兴起的那一段时间来说美观程度也是很好的。多数用于系统管理系统 缺点：页面加载过慢，重量级框架（底层你会发现...
基于ExtJS3的后台管理系统模板
05-09
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...
SSH+Extjs4 0实现的权限管理系统 基于角色的权限设计
10-22
含有数据库，导入Myeclipse部署即可访问
基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2
02-19
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架，其实是个只有大框架的，并没有其他功能，您可能会骂我标题党“通用权限管理系统,通用后台模板”，呵呵，其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
Extjs+Struts2系统后台管理框架
06-16
Extjs+Struts2系统后台管理框架，实习基本的添加新闻列表和用户列表等基本功能，登陆页面。
信息办公ExtJS 2.2 图书管理系统-bmsh.rar
最新发布
04-28
该系统采用了流行的前端技术ExtJS 2.2，结合了后端的Java服务器页面（JSP）技术，为用户提供了一个功能丰富、界面友好的图书管理平台。这个资料包包含了系统的全部源代码，用户可以直接下载并在本地环境中运行，无需...
extjs html 指向网页,extjs-mvc结构实践(二):基本页面
weixin_33917277的博客
06-30 205
接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。书接上回，开始写UI效果。目标全屏显示、左侧导航菜单，右侧标签页切换操作内容区域。包含header和footer导航菜单动态ajax产生，点击对应菜单可以动态加载js资源或者数据不要太丑！！！！先扯点概念：一些基本的Extjs概念本文不会去讲，请参考官网API文档。但是对于用java的同志来说，看extjs的结构应该是很容易的定义与创...
ExtJs笔记
literaryfly的专栏
02-24 151
1.Ext简介 .Extjs是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJs可以用来开发RIA（Rich Internet Application,富互联网应用系统）的Ajax应用框架。 ExtJs是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJs用在....
ext3 简单grid 页面
专栏
08-24 1796
<% String bingcount = (String)request.getAttribute("BINGCOUNT"); String messcount = (String)request.getAttribute("MESSCOUNT"); String livecount = (String)request.getAttribute("LIVECOUNT"); %>
extjs+页面刷新
10-26
3. 使用定时器：可以使用JavaScript的定时器来定时刷新页面。在ExtJS中，可以使用Ext.TaskManager类来管理定时器。 4. 使用WebSocket技术：WebSocket是一种全双工通信协议，可以实现服务器主动向客户端推送数据。在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值