extjs3 用戶管理 頁面

原創 传说中的大神 2020-06-16 03:45 
<%@ 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>

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

開源十年，AOSuite 開發平臺停止維護 [EOL]

AOSuite 是我在 2006 - 2016 年間開發和維護的一節開源項目。那還是一個 jQuery UI 和 ExtJS 橫行的年代。現在想來還滿滿都是回憶。隨着前端技術的發展和後端微服務技術的流行，AOSuite 到了該退場的時候了。

原創 2022-12-24 22:05:18

解決ExtJS在chrome或火狐中正常顯示，但是在ie中不顯示的問題

解決ExtJS在chrome或火狐中正常顯示，但是在ie中不顯示的問題 參考文章： （1）解決ExtJS在chrome或火狐中正常顯示，但是在ie中不顯示的問題 （2）https://www.cnblogs.com/yuezk/archi

技術盛宴 2021-05-23 21:27:40

ExtJs的Grid常用功能說明

1、Ext.grid.GridPanel 主要配置項： store：表格的數據集 columns：表格列模式的配置數組，可自動創建ColumnModel列模式 autoExpandColumn：自動充滿表格未用空間的列，參數爲列id，該id

原創 2021-03-22 21:31:23

EXTJS4 MVC模式筆記

工作筆記 //var cnr = this.application.getController("DeviceInfoController");//

denghua10 2020-07-07 16:47:49

EXTJS grid中顯示Date timestamp等多種類型改造方法 實用所有數據類型轉換

EXTJS的JSON數據轉換，也就是使用到了json-lib包，當時間格式傳遞到前臺的時候出現類似結構： {"date":21,"day":1,"hours":23,"minutes":39,"month":11,"nanos":0,"

denghua10 2020-07-07 16:47:49

Extjs4 grid selectChange多次觸發問題

Extjs4 grid selectChange事件 在grid中 關閉後重新打開會多次觸發事件，可以換成cellclick事件。

denghua10 2020-07-07 16:47:39

EXTJS4.0 gridpanel 用法筆記～～簡單的創建grid

1.創建一個model     Ext.define('model', { extend : 'Ext.data.Model', fields : [ { name : 'NAME', type : 'string' }, { name 

zhangzhida163 2020-07-07 11:33:34

Ext開發代碼片段蒐集

1.  表格數據加載後默認選中第一條    可以在表格的render 添加如下監聽事件   listeners : { 'render':function(){ var _grid = Ext.getCmp(

arron168 2020-07-07 09:11:27

MyEclipse安裝Ext JS和jQuery自動提示功能

對於目前的MyEclipse的插件安裝是很簡單的，把spket1.6.18破解版.zip解壓後直接複製到MyEclipse安裝目錄的dropins文件夾下即可。如圖：   安裝完成後，啓動MyEclipse，打開window—Pre

zzq58157383 2020-07-06 11:57:36

extjs前臺把一個actioncolumn按鈕放大 並且居中的操作

.light-yellow {     background-image: url('../img/icon-big/greenlight.png')  ;background-position:center;height:66px;wi

死狗等夜狼 2020-07-06 10:36:38

EXTjs常用的組件方法

知乎文章百度搜索不到 還是回到csdn把 自己搭博客又太麻煩 看了白鶴extjs視頻學習資料後整理一下 以後用的時候看看 1 選擇器時 1 btn.up()/down().屬性 參數是選擇器或者組件的xtype 2 Ext.getCmp(

死狗等夜狼 2020-07-06 10:36:38

哪些可以找到很多開發用的圖標

coolite toolkit 是什麼玩意？   Coolite Toolkit 簡介 Coolite Toolkit 是一個支持ASP.NET AJAX的Web控件 Coolite Toolkit是基於跨瀏覽器的ExtJS 庫開發而

rolandluo 2020-07-06 03:13:38

配置ExtJS的開發調試環境

這裏需要好好總結一下，折騰了兩天弄這個開發環境。之前已經搭建過一套，但是人是而物非了，和之前還是有很多不一樣的地方。這裏要狠狠的mark一下。   開發工具 PDT（eclipse）+ Zend 下載一個省事的包 all-in-one 的

rolandluo 2020-07-06 03:13:38

extjs設置爲disable後表單無法提交參數到後臺的問題

今天發現某個輸入框設置field.disable();後，即使提交時有設置field的值，但這個值也無法提交到後臺。到網絡上搜索下了，另外發現一篇文章，作爲以後的參考： --原文地址：http://blog.csdn.net/serena

beiguofengguang 2020-07-05 05:25:57

extjs4.02頁面靜置一段時間後報events爲空錯誤的原因

原因是引入了ext-all 和 bootstrap兩個文件，將ext-all刪除就好了！

ijackson 2020-07-05 03:39:53