自己写的一段EXTJS代码

最新推荐文章于 2021-06-16 17:44:44 发布
最新推荐文章于 2021-06-16 17:44:44 发布
阅读量86 收藏
点赞数
分类专栏： Ext 文章标签： EXT Ajax
贴一段自己写的代码。sorry，没有解释，有空再说吧。 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  	var assign=function(value){			
				MainPanel=Ext.getCmp('MainPanel');
  				var n=MainPanel.getComponent("assignCostcenter");  						
  				if(!n){
  						var n = MainPanel.add({
								id :"assignCostcenter",
								title :"为用户分配Cost Center",
								closable :true,														
								autoLoad : {
									url :'/OA2/profplan/assigncostcenter!index.action',
									scripts :true,
									scope :this,
									params :{
										userid:value
									},
									nocache: true,
									callback: function(response,success ){							
											},
									text: "正在加载<font color='red'>【分配Cost Center】</font>页面.........请稍后!"
								}
							});
  				 }else{
  				 	n.getUpdater().update({
  										url :'/OA2/profplan/assigncostcenter!index.action',
  										params :{
											userid:value
										},
										nocache: true,
										text: "正在加载<font color='red'>【分配Cost Center】</font>页面.........请稍后!"
  									});
  				 }
				MainPanel.setActiveTab(n);
		};
  	Ext.onReady(function(){		
  		Ext.BLANK_IMAGE_URL = '../../../Ajax/extjs/resources/images/default/s.gif';
  		Ext.QuickTips.init(); 
  		var changeStatus=function(value){
					if(value==1){
						return "<span style='color:green;font-weight:bold;'>激活</span>";
					}else{
						return "<span style='color:red;font-weight:bold;'>禁止</span>";
					};
				};	
		var assignCostCenter=function(value){
				return '<a href="#" style="text-decoration:none;" onclick="assign('+value+')">'+'分配Cost Center'+'</a>';
		};		
  		var height=Ext.get('MainPanel').getHeight();		
  		var sm = new Ext.grid.CheckboxSelectionModel({}); 		
  		var cm = new Ext.grid.ColumnModel([  		
  			new Ext.grid.RowNumberer(),//自动行号
   				 			sm,//添加的地方
		    {header:'用户名',dataIndex:'username'},
		    {header:'英文名',dataIndex:'ename'},
		    {header:'部门',dataIndex:'dept'},
		    {header:'账号状态',dataIndex:'status',renderer:changeStatus},
		    {header:'分配Cost Center',dataIndex:'id',renderer:assignCostCenter}
			]);
			cm.defaultSortable = true;					
			sm.on("selectionchange",function(sm){ //控制toolbar的状态					
					var count=sm.getCount();								
					if(count==1){
						grid.getTopToolbar().items.item(2).enable();//删除
						grid.getTopToolbar().items.item(4).enable();//修改
					}else if(count>=2){
						grid.getTopToolbar().items.item(2).enable();
						grid.getTopToolbar().items.item(4).disable();
					}else if(count==0){
						grid.getTopToolbar().items.item(2).disable();
						grid.getTopToolbar().items.item(4).disable();
					};
			});
			var store = new Ext.data.Store({
					    proxy: new Ext.data.HttpProxy({   
					        method: 'GET',   
					        url: '/OA2/profplan/profuser!getProfUser.action'  
					    }),   
					    reader: new Ext.data.JsonReader({ 
					             totalProperty:"totalProperty",
					             root:"root",
					             fields:['id','sysuerid','dept','username','ename','status']
					         })

				});    
			store.load({params:{start:0,limit:20}});			
            var pagingBar = new Ext.PagingToolbar
            ({
            		pageSize: 20, 
					store: store, 
                   	autoScroll:true, 
					displayInfo : true, 
					beforePageText : '第', 
					afterPageText : '页共 {0} 页', 
					displayMsg : '显示 {0} - {1}，共 {2} 条', 
					emptyMsg : '没有数据需要显示'
            });
			var grid = new Ext.grid.GridPanel({
					title:'用户信息表',
				    renderTo: 'profuser',
				    ds: store,
				    cm: cm,
				    sm:sm,
				    tbar:[{
					    	text:'添加新用户',
					    	listeners:{
					    		'click':function(){
					    			User_CURD.addUser("");
					    		},
					    		scope:this
					    	}
				    	},'-',{
					    	text:'编辑用户',
					    	width:12,
					    	disabled:true,
					    	handler:function(){
					    			var data=grid.getSelectionModel().getSelected();					    			
					    			User_CURD.addUser(data);
					    	}
				    	},'-',{
				    	text:'删除用户',
				    	width:12,
				    	disabled:true,
				    	handler:function(){				    				
				    				Ext.Msg.confirm('提示','真的要删除该用户吗?',function(btn){
				    						if(btn=='yes'){
				    								var data=grid.getSelectionModel().getSelections();								
													if(data.length>1){
															var info="这"+data.length+"条";
													}else{								
															var info="用户名为:"+data[0].get('username')+"的";
													}
													var id="";
													for(var i=0;i<data.length;i++){
														id+=data[i].get('id')+',';
													}								
													Ext.Msg.confirm('提示','<font color="red">确定要删除'+info+'记录吗？警告:同时会删除与之相关的数据</font>',function(bt){
														 	if(bt=='yes'){
														 			Ext.Ajax.request({
																		url:'/OA2/profplan/profuser!delProfUser.action',
																		method:'Post',
																		params:{
																				id:id
																			},
																		success:function(o){profUserNew.successFn(o,'','')},
																		failure:function(o){profUserNew.successFn(o)}
																});
														 	}
													})
				    						}

				    				});
				    		}
				    	},'-','按姓名搜索:',new Ext.form.ComboBox({store:store,typeAhead:true,triggerAction:'all',mode:'local',displayField :'username'})],
				    height:height-35,
					autoScroll :true,
				    region:'center',				    		    			  
				 	layout:"fit",
				 	margins:'0 0 0 0',                   
				    autoWidth : true,                         
                    bbar:pagingBar 
				});
	//以下是对增删改成用户
		var ClearUserWind=function(grid,yes){//清除user_Wind数据
					if(yes){
						grid.ownerCt.findByType("textfield")[0].setValue('');	
						}				
						grid.ownerCt.findByType("textfield")[1].setValue('');
						grid.ownerCt.findByType("textfield")[2].setValue('');
		};
		  var User_CURD=function(){		  		
	  	  		return{
	  	  			addUser:function(data){
					 var user_Wind=new Ext.Window({ //创建一个window
				  	  				title:data==""?'添加新用户':'编辑用户',
				  	  				width:440,
				  	  				height:200,
				  	  				frame:true,
				  	  				buttonAlign:'center',
				  	  				modal:true,
				  	  				layout:'form',
				  	  				id:data==""?new Date().getSeconds():data.get('id'),
				  	  				plain:true,
				  	  				bodyStyle:{padding:'5px,5px,5px,5px'},
				  	  				buttons :[{
				  	  					text:'保存',
				  	  					handler:function(){				  	  
				  	  								var par;
				  	  								var win=this.ownerCt;
				  	  								var grid=this.ownerCt.findByType("grid")[0];	  	  								
				  	  								if(!grid){				  	  									
				  	  									 par="{'id':this.ownerCt.findByType('hidden')[0].getValue(),"+
														   	" 	'sysuerid':this.ownerCt.findByType('hidden')[1].getValue(),"+
														   	"   'dept':this.ownerCt.findByType('textfield')[2].getValue(),"+
														   	"   'username':this.ownerCt.findByType('textfield')[0].getValue(),"+
														   	"   'ename':this.ownerCt.findByType('textfield')[1].getValue(),"+
														   	"	'status':this.ownerCt.findByType('combo')[0].getValue() }";
				  	  									}else{
				  	  									 var data=grid.getSelectionModel().getSelected() ;
				  	  									 if(grid.getSelectionModel().getCount()<=0){
				  	  									 	Ext.Msg.alert("提示","请选择你要添加的用户！");
				  	  									 	return ;
				  	  									 }				  	  									
			  	  										 par="{'id':'',"+
														   	" 	'sysuerid':data.get('id'),"+
														   	"   'dept':data.get('dept'),"+
														   	"   'username':data.get('name'),"+
														   	"   'ename':data.get('ename'),"+
														   	"	'status':this.ownerCt.findByType('combo')[0].getValue()  }";
				  	  									}
				  	  								Ext.Ajax.request({
																	   url: '/OA2/profplan/profuser!saveProfUser.action',
																	   method:'Post',																	  
																	   params: eval('(' + par +')'),
																	   success: function(o){profUserNew.successFn(o,win,'')},
																	   failure: function(o){profUserNew.failedFn(o,'','')}																	   
																	});
				  	  						}
				  	  					},{
				  	  					text:'取消',
				  	  					handler:function(){
				  	  						this.ownerCt.close();
				  	  					}
				  	  					}],	
				  	  					defaults:[{labelWidth:20}],
				  	  					items:[{
				  	  							layout:'column',
				  	  							baseCls:'x-plain',
				  	  							items:[{
				  	  									columnWidth:.7,
				  	  									layout:'form',
				  	  									baseCls:'x-plain',			  	  									 	  									
				  	  									items:[{
				  	  										xtype:'textfield',				  	  										
				  	  										width:180,
				  	  										name:'EmpInfo',
				  	  										fieldLabel:'用户姓名',
				  	  										readOnly:data!="",
				  	  										value:data!=""?data.get("username"):data,
				  	  										allowBlank:false
				  	  									}]
				  	  								},{
				  	  									columnWidth:.3,
				  	  									layout:'form',
				  	  									baseCls:'x-plain',
				  	  									items:[{
				  	  										xtype:'button',
				  	  										text:'搜素',			  	  										  	  										
				  	  										width:14,	
				  	  										disabled:data==""?false:true,			  	  										
				  	  										handler:function(){	
				  	  												var win=this.ownerCt.ownerCt.ownerCt;
				  	  												ProfUserGrid(win);
				  	  										}
				  	  									}]				  	  									
				  	  								}]
				  	  						},{
				  	  							layout:'form',
				  	  							baseCls:'x-plain',				  	  						
				  	  							items:[new Ext.form.Hidden({name:'id',value:data!=""?data.get("id"):''}),
				  	  								new Ext.form.Hidden({name:'sysuerid',value:data!=""?data.get("sysuerid"):''}),{
					  	  							fieldLabel:'英文名',readOnly:true,name:'ename',xtype:'textfield',
					  	  							value:data!=""?data.get("ename"):data,width:240
					  	  						},{
					  	  							fieldLabel:'部门',readOnly:true,	name:'dept',xtype:'textfield',
					  	  							value:data!=""?data.get("dept"):data,width:240					  	  							
					  	  						},{
					  	  							fieldLabel:'账号状态',xtype:'combo',width:240,
					  	  							mode:'local',name:'activity',readOnly:true,
					  	  							triggerAction:'all',typeAhead:true,forceSelection:true,
					  	  							valueField:'value',displayField:'activity',
					  	  							value:data!=""?data.get("status"):"1",
					  	  							store:new Ext.data.SimpleStore({
					  	  											data:[['激活',1],['禁止',0]],
					  	  											fields:['activity','value']
					  	  										})					  	  							
					  	  						}]				  	  						
				  	  						}]

				  	  			}).show();			
				  	 var ProfUserGrid=function(win){
				  	 		var wait=Ext.Msg.wait('请稍后','正在帮您搜索!','');				  	  													  	  												  	  											  	  											
  								var username=win.findByType('textfield')[0].getValue();
							  			if(username==""){
							  				Ext.Msg.alert("服务器提示","请输入员工姓名后再搜索!");
							  				return false;
							  			}
							  		var grid=win.findByType("grid")[0];														  		
							  		if(!grid){//如果grid不存在														  		
							  			var ds=new Ext.data.Store({
												    	//autoLoad:true,
												    	proxy: new Ext.data.HttpProxy({
												        	method: 'GET',											        	
												       		url:encodeURI('/OA2/profplan/profuser!searchUser.action?username='+username)}),
															reader: new Ext.data.JsonReader({ 
																             totalProperty:"totalProperty",
																             root:"root",
																             fields:['id','name','ename','dept','empCode','empId']
															   })										 
															});
										 ds.load({params:{start:0,limit:3}});
										 grid=new Ext.grid.GridPanel({	//搜索后的grid				  										
		  											height:155,
		  											hidden:true,
		  											title:"<font color='red'>搜索结果如下---请选择或重新搜索</font>",
		  											xtype:'grid',
		  											width:540,
		  											frame:true,
												    ds: ds,
												    cm: new Ext.grid.ColumnModel([
												    						new Ext.grid.CheckboxSelectionModel({singleSelect :true}),									   				 			
																		    {header:'中文名',dataIndex:'name'},
																		    {header:'英文名',dataIndex:'ename'},
																		    {header:'部门',dataIndex:'dept'}	,
																		    {header:'员工卡号',dataIndex:'empCode'}																									   															    
																			]),
												    sm:new Ext.grid.CheckboxSelectionModel({
												    						singleSelect :true ,
												    						listeners:{'selectionchange':function(sm){
												    								var count=sm.getCount();
												    								if(count>0){
												    									var data=sm.getSelected();												    									
												    									grid.ownerCt.findByType("hidden")[1].setValue(data.get('id'));
													    								grid.ownerCt.findByType("textfield")[0].setValue(data.get('name'));																					    								
													    								grid.ownerCt.findByType("textfield")[1].setValue(data.get('ename'));	
													    								grid.ownerCt.findByType("textfield")[2].setValue(data.get('dept'));																			    																												    								
												    								}else{										    									
													    								ClearUserWind(grid,true);
												    								}

												    						}}}),
													autoScroll :true,											    
												 	margins:'0 0 0 0',															                 
								                    bbar:new Ext.PagingToolbar
													            ({
												            		pageSize: 3, 
																	store: ds, 
												                   	autoScroll:true, 
																	displayInfo : true, 
																	beforePageText : '第', 
																	afterPageText : '页共 {0} 页', 
																	displayMsg : '显示 {0} - {1}，共 {2} 条', 
																	emptyMsg : '没有数据需要显示'
													            }) 
						  									});
												win.add(grid);
												grid.setVisible(true);
										  		win.setHeight(300);
										  		win.setWidth(460);
										  		win.doLayout();														  		
										  		wait.hide();																															  		
							  		}
							  		else{//grid存在，刷新stroe
							  			ClearUserWind(grid,false);
							  			ds=	grid.getStore();
							  			ds.proxy.conn.url=encodeURI('/OA2/profplan/profuser!searchUser.action?username='+username);
							  			//ds.load({params:{start:0,limit:3}});
							  			ds.reload();
							  			wait.hide();
							  		}

				  	 }
	  	  			}
	  	  		}
	  	 	 }();
	  	var profUserNew=function (){
	  			return{	  				
	  				successFn:function(o,win,obj){
								if(typeof o==="object"){
									 var result = Ext.decode(o.responseText);
									 if(result.success==='true'){									 	
									 	if(win!=''){
									 		Ext.Msg.alert('服务器响应','恭喜你,该记录已经保存成功!');	
									 		win.close();									 		
									 	}else{
									 		Ext.Msg.alert('服务器响应','恭喜你,该记录已经删除成功!');	
									 	}
									 	grid.getStore().reload();									 									 	
									 }else if(result.success==='conflick'){
									 	Ext.Msg.alert('服务器响应','已经存在一条记录相同的用户名,请重新输入!');
									 }else{
									 	Ext.Msg.alert('服务器响应','操作失败,请检查操作,请重试!');
									 }
								}
							},
							failedFn:function(o){
								Ext.Msg.alert('服务器响应','操作失败,服务器错误,请重试!');
							}

	  			}	  	
	  		}()
  		})  
  </script>
  </head>
  <body>
  	<div id='profuser'></div>
  </body>
</html>
frisk_zhou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs与C#完美接合写法控件源代码
05-19
Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码
extjs tabpanel限制选项卡数量实现思路及代码
10-27
本文将详细介绍如何在EXTJS中实现这一功能，并提供相关的代码示例。 首先，我们要理解EXTJS的`tabpanel`工作原理。`tabpanel`是EXTJS的`Ext.tab.Panel`类的一个实例，它允许用户通过点击不同的选项卡来切换内容。每...
Ext.net中如何使用Extjs代码
810364804
04-15 114
http://www.ext.net.cn/forum.php?mod=viewthread&amp;tid=1748 首先要拖拽一个ResourcePlaceHolder控件将Mode设置为script &lt;ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" Mode="Script" runat="server"&gt; &lt;/...
extjs 的一段代码
gjswxhb的专栏
12-17 793
Ext.define('MyApp.view.MyViewport', { extend: 'Ext.container.Viewport', layout: { type: 'border' }, initComponent: function() { var me = this; Ext.applyIf(me
extjs mvc分层代码
yxl626571494的博客
03-13 865
extjs mvc分层代码
无意中看到的一段extjs 代码 关于tree 节点信息更新的
weixin_34357887的博客
08-26 59
2019独角兽企业重金招聘Python工程师标准>>> ...
EXTJS详细教程
热门推荐
qq_34462698的博客
06-16 1万+
布局和容器 普通布局 Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), width: 400, height: 300, title: 'Container Panel', items: [{ xtype: 'panel', title: 'Child Panel 1', height: 100, width: '75%' }, {
Extjs规范（自己的）
01-29
ExtJS 是一个强大的JavaScript 应用程序框架，用于构建富客户端Web应用。它提供了一整套组件和工具，使得开发者可以构建复杂的用户界面而无需深入HTML、CSS和JavaScript的底层细节。以下是我根据标题和描述整理出的...
ExtJS 入门
10-28
- **解释**：这段代码会在 DOM 加载完成后弹出一个对话框显示 “Hello World!”。 #### 二、获取页面元素 - **基本方法**：通过 `Ext.get` 方法可以获取页面中的某个元素。 ```javascript var myDiv = Ext.get('...
Extjs配置文件和示例文件
08-14
这段代码定义了一个名为"MyApp"的应用，指定了启动函数、使用的视图、数据存储和模型。 接下来，我们来看看`示例JSP`和`js程序文件`。JSP（JavaServer Pages）是一种服务器端的动态网页技术，它与ExtJS结合，可以...
ExtJs开始之旅
08-20
你会了解到ExtJS是如何通过组件化的思想来构建页面，每个组件都有自己的生命周期、属性、方法和事件，这使得代码复用和维护变得简单。 接下来，"环境搭建"章节将指导你配置开发环境。这通常包括下载和安装ExtJS库，...
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
07-28
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
tour-project【程序员VIP专用】.zip
07-28
【项目简介】 HTML5+CSS实现雪花旅行社
基于Springboot和Vue的物品租赁系统源码 物品租赁系统代码（高分毕设项目）
最新发布
07-28
物品租赁系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
物联网设备的哨兵：异常行为检测实现策略
07-28
物联网开发（IoT Development）是指开发和设计用于物联网（Internet of Things）的系统、设备和服务的过程。物联网是一个由物理设备、车辆、家用电器以及其他物品组成的网络，它们内嵌了传感器、软件和连接性，能够收集和交换数据。这些设备通过互联网相互连接，实现智能化操作和远程监控。 物联网开发通常涉及以下几个方面： 1. **硬件开发**：设计和制造能够收集数据的传感器和设备。 2. **软件编程**：编写控制设备行为的软件代码，包括嵌入式系统编程和移动应用开发。 3. **网络通信**：确保设备能够通过Wi-Fi、蓝牙、ZigBee、LoRa等无线技术进行数据传输。 4. **数据管理**：开发用于存储、处理和分析收集到的数据的系统。 5. **用户界面设计**：创建用户友好的界面，使用户能够与物联网设备进行交互。 6. **安全性**：确保设备和数据传输的安全性，防止黑客攻击和数据泄露。 7. **系统集成**：将不同的物联网设备和系统整合到一起，实现协同工作。 物联网开发是一个跨学科领域，需要电子工程、计算机科学、网络技术、数据分析和用户体验设计等多方面的
"初试extJs，控件；CRUD示例代码
接着，引入了一段jsp代码，该代码中包含了extJs的引入路径和一些必要的java引入语句。 在示例代码部分，定义了一个函数searchQueryForm()，用于绘制查询表单。在函数中，使用了Ext.FormPanel来创建表单，并指定了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值