文档章节

Ext简单实例

wenqi_arthur
 wenqi_arthur
发布于 2015/03/30 09:19
字数 1400
阅读 27
收藏 1

最近在接触Ext,参考别人的代码写了一个简单的Ext表单操作实例。

Jsp页面引入Ext基本的样式和js:

 <link rel="stylesheet" type="text/css" href="${request.contextPath}/content/themes/blue/public.css">
	<link rel="stylesheet" type="text/css" href="${request.contextPath}/content/themes/blue/pop_layer.css">
	<link rel="stylesheet" type="text/css" href="${request.contextPath}/content/themes/blue/vtabpanel.css"/>
	<link rel="stylesheet" type="text/css" href="${request.contextPath}/lib/gsui/ux/css/ux-all.css">
	<script type="text/javascript"	src="${request.contextPath}/lib/gsui/ux/ux-all.js"></script>
	<script type="text/javascript"	src="${request.contextPath}/lib/gsui/ux/vtabpanel.js"></script>

	<script type="text/javascript" src="${request.contextPath}/content/js/mydemo/myExt.js"></script>

myExt.js文件内容如下:

Gsui.ns('MyCompany.ExtDemo');

/**
 * 页面入口
 */
Gsui.onReady(function() {
	var initViewport = function() {
		new Gsui.Viewport({
			id : 'viewport',
			layout : 'fit',
			items : {
				xtype : 'panel',
				defaults : {
					style : 'padding:10px 10px 0px 10px;'
				},
				bodyStyle : 'border : 0px;',
				layout : 'border',
				items : [ {
					region : 'center',
					xtype : 'mydemoGridPanel'
				}]
		},
	});
};
initViewport();	
});

MyCompany.ExtDemo.MydemoGridPanel = Gsui.extend(Gsui.grid.GridPanel,{
					id : 'mydemoGridPanel',
					stripeRows : true,
					enableHdMenu : false,
					style : 'padding-top:5px', // 修复bug:增加上下收缩间距
					bwrapStyle : 'border:1px solid #E0E4E8',
					border : false,
					pageSize : 10,
					autoExpandColumn : true,

					initComponent : function() {

						//baseParams:发送请求的基础参数
						var baseParams = {
							'page.limit' : 10,
							'page.start' : 0,
							'myParam' : "参数传递"
						};
						
						var sm = new Gsui.grid.CheckboxSelectionModel(
								{
									renderer : function(v, c, r) {
										if (r.get("ifOnline") != 9) {
											return "<div class=\"x-grid3-row-checker\">&#160;</div>";
										} else {
											return "";
										}
									}
								});
						
						//cm:column model
						var cm = this.cm;
						if (!cm) {
							cm = this.buildCm();
							cm.unshift(sm);
						}
						
						//store:表格数据,后台的bean属性要与store的fieldsName对应
						var store = new Gsui.data.JsonStore({
							url : _app.contextPath+ '/mydemo/getInfo.action?aa='+ Math.random(),
							baseParams : baseParams,
							root : 'data',
							autoLoad : true,
							fields : [ {name : 'id'}, 
							           {name : 'ip'}, 
							           {name : 'name'}, 
							           {name : 'status'}, 
							           {name : 'vender'}, 
							           {name : 'remark'}, 
							           {name : 'addTime'}, 
							           {name : 'type'}, 
							           {name : 'ifOnline'}, 
							           {name : 'x'}, 
							           {name : 'y'}
							         ]
						});
						Gsui.apply(this, {
							selModel : sm,
							store : store,
							colModel : new Gsui.grid.ColumnModel({
								defaults : {
									align : 'center',
									sortable : false
								},
								columns : cm
							}),
							tbar : [ {
								xtype : 'displayfield',
								value : ' &nbsp; &nbsp; 服务器信息列表',
							}, '->', {
								text : '增加',
								id : 'addBtn',
								style : 'margin-right:10px',
								ref : '../btnAdd'
							} , {
								text : '修改',
								id : 'modifyBtn',
								style : 'margin-right:10px',
								ref : '../btnEdit'
								/*handler : function() {
									confirmModify('modifyOperate');
								}*/
							}, {
								text : '删除',
								id : 'deleteBtn',
								style : 'margin-right:10px',
								ref : '../btnDelete'
							}, {
								text : '刷新',
								id : 'refreshbtn',
								ref : '../btnRefresh'
							}],
							bbar : new Gosun.manage.PagingToolbar({
								store : store,
								displayInfo : true,
								pageSize : this.pageSize,
								displayCount : true
							})
						});
						MyCompany.ExtDemo.MydemoGridPanel.superclass.initComponent.apply(this);
						
						//绑定按钮事件
						this.btnDelete.on('click',this.onDelete,this);
						this.btnAdd.on('click',this.onAdd,this);
						this.btnEdit.on('click',this.onEdit,this);
						this.btnRefresh.on('click',this.onRefresh,this);
						
						//刷新描述 通过this.publish("/mydemo/refresh");的方式来调用
						this.subscribe('/mydemo/refresh',this.onRefresh,this);
						
						this.on(
										'render',
										function() {
											var store = this.getStore();
											var view = this.getView();
											this.tip = new Gsui.ToolTip(
													{
														target : view.mainBody,
														delegate : '.x-grid3-row',
														trackMouse : true,
														renderTo : document.body,
														listeners : {
															beforeshow : function updateTipBody(tip) {
																var rowIndex = view.findRowIndex(tip.triggerElement);
																var record = store.getAt(rowIndex);
																var Msg = record.get("name");
																
																//str.replace:str为空时报错
																tip.body.dom.innerHTML = "<b>备注:</b></br>"
																		+ Msg.replace("<","&lt;").replace(">","&gt;");
															}
														}
													});
										});
					},

					buildCm : function() {
						Gsui.apply(this.actionColumn, {
							grid : this
						});
						var cm = [
								new Gsui.ux.grid.PagingRowNumberer({
									header : '序号'
								}),
								{
									header : 'id',
									dataIndex : 'id',
									hidden : true
								},
								{
									header : '设备名称',
									dataIndex : 'name',
									
									renderer : function(value, cellmeta, record) {
										if (value == "表格回调展示") {
											return "更改列名";
										}else{
											return value;
										}
									}
								},
								{
									header : '状态',
									dataIndex : 'status',
								},
								{
									header : '设备厂家',
									dataIndex : 'vender',
								},
								{
									header : '备注',
									dataIndex : 'remark',
								},
								{
									header : '添加时间',
									dataIndex : 'addTime',
								},
								{
									header : '类型',
									dataIndex : 'type',
									hidden : true
								},
								{
									header : 'IP地址',
									dataIndex : 'ip',
								},
								{
									header : '是否在线',
									dataIndex : 'ifOnline',
								},
								{
									header : 'Y坐标',
									dataIndex : 'x',
								},
								{
									header : 'Y坐标',
									dataIndex : 'y',
								}  ];
						return cm;
					},

					afterRender : function(ct, position) {
						MyCompany.ExtDemo.MydemoGridPanel.superclass.afterRender.apply(this, arguments);
					},
					
					/**删除服务器**/
					onDelete:function(){
						//返回选中的结果集
						var records = this.getSelectionModel().getSelections();
						var serverVenderList = new Array();
						
						/**返回选中的结果集的第一条记录**/
						//var selectRecord = this.getSelectionModel().getSelected();
						
						if(records.length == 0){
							Gsui.Msg.alert("提示","请选择需要删除的服务器");
							return;
						}
						
						for (var i = 0; i < records.length; i++) {
							var venderObj = {};
							venderObj.id = records[i].data.id;
							
							alert("id--->"+venderObj.id);
							
							venderObj.name = records[i].data.name;
							serverVenderList.push(venderObj);
						}
						
						Gsui.Msg.confirm('警告',"确认需要删除此服务器?",function(btn){
							if(btn == 'yes'){
								Gsui.Ajax.request({
							        url: _app.contextPath+'/mydemo/deleteServer.action',
							        params: Util.param({paramsList : serverVenderList}),
							        method: 'POST',
							        scope:this,
							        callback: function (options, success, response) {
							        	if(success){
							        		var res = Gsui.util.JSON.decode(response.responseText);
							        		var operMsg = "";
							        		if(res.data.length == 0){
							        			operMsg = "删除成功";
							        			this.publish("/mydemo/refresh");
							        		}else{
							        			var unDeletedVenderName = '';
							        			for(var i = 0; i < res.data.length; i++){
							        				unDeletedVenderName = unDeletedVenderName + res.data[i].name + '、';
							        			}
							        			unDeletedVenderName = unDeletedVenderName.substring(0, unDeletedVenderName.length-1);
							        			operMsg = "以下服务器删除失败:" + unDeletedVenderName;
							        			this.publish("/mydemo/refresh");
							        		}
							        		Gsui.Msg.alert("提示",operMsg);
							        	}
							        }
								},this);
							}
						},this);
					},//onDelete
					
					onRefresh : function(){
						this.store.reload();
					},//onRefresh
					
					onAdd : function(){
						new MyCompany.ExtDemo.serverInfoWindow({
							operateType : 'add'
						}).show();
					},//onAdd

					onEdit : function(){
						var selectRecord = this.getSelectionModel().getSelected();
						if(selectRecord == null){
							Gsui.Msg.alert("提示","请选择需要编辑的服务器");
							return;
						}
						new MyCompany.ExtDemo.serverInfoWindow({
							operateType : 'edit',
							title :'编辑服务器',
							serverObj : selectRecord.data
						}).show();
					}//onEdit
				});

Gsui.reg('mydemoGridPanel', MyCompany.ExtDemo.MydemoGridPanel);

/**
 * 服务器管理窗口
 */
MyCompany.ExtDemo.serverInfoWindow = Gsui.extend(Gsui.Window,{
	title : '添加服务器',
	width : 340,
	height : 395,
	layout : 'anchor',
	modal : true,
	buttonAlign : 'center',
	resizable : false,
	operateType : null,
	venderObj : null,
	
	fbar : [{
		text : '保存',
		ref : '../btnConfirm'
	},{
		text : '取消',
		ref : '../btnCancel'
	}],
	
	initComponent : function(){
		Gsui.apply(this,{
			items : [{
					xtype : 'serverInfoFormPanel',
					serverObj : this.serverObj,
					ref : 'form'
				}]
			});
		
		MyCompany.ExtDemo.serverInfoWindow.superclass.initComponent.apply(this);
		
		this.btnConfirm.on('click',this.onSave,this);
		this.btnCancel.on('click',this.onClickCancel,this);
	},
	afterRender : function(ct,position){
		MyCompany.ExtDemo.serverInfoWindow.superclass.afterRender.apply(this,arguments);
		
		if(this.operateType == 'edit'){
			//填充编辑数据
			for(var fieldName in this.serverObj){
				var field = this.form.getForm().findField(fieldName);
				if(!Gsui.isEmpty(field)){
					field.setValue(this.serverObj[fieldName]);
				}
			}
		}
	},
	onSave:function(node){
		if(!this.form.getForm().isValid()){
			return;
		}
		
		var serverDevInfo = {};
		var formValues = this.form.getForm().getValues();
		for(var valueName in formValues){
			serverDevInfo["serverDevInfo."+valueName] = formValues[valueName];
		}
		
		if(this.operateType == 'edit'){
			serverDevInfo["serverDevInfo.id"] = this.serverObj.id;
		}
		
		var requestUrl = _app.contextPath+'/mydemo/editAndaddServer.action?operateType='+this.operateType;
		
		Gsui.Ajax.request({
	        url: requestUrl,
	        params: Util.param(serverDevInfo),
	        method: 'POST',
	        scope:this,
	        callback: function (options, success, response) {
	        	if(success){
	        		var msg = "添加厂商成功";
	        		if(this.operateType == 'edit') msg = "编辑厂商成功";
	        		Gsui.Msg.alert("提示",msg);
	        		this.publish("/mydemo/refresh");
	        	}
	        }
		},this);
		
		this.close();
	},
	onClickCancel : function(){
		this.close();
	}
});

/**
 * 数据表单 用来添加或者编辑数据
 */
MyCompany.ExtDemo.serverInfoFormPanel = Gsui.extend(Gsui.form.FormPanel,{
	venderObj : null,
	initComponent : function(){
		Gsui.apply(this,{
	        defaults: {width: 230},
	        labelWidth : 80,
			labelAlign : 'right',
	        defaultType: 'textfield',
	        items: [{
	                fieldLabel: 'IP地址',
	                name: 'ip',
	                allowBlank:false
	                /**可以对表单进行校验**/
	                //maskRe:new RegExp("^[0-9]+$"),
		            //regex:new RegExp("^[0-9]+$"),
		            //regexText : '只允许输入数字',
	                //minLength : 7,
	                //maxLength : 11,
	            },{
	                fieldLabel: '服务器名称',
	                name: 'name',
	                allowBlank:false
	            },{
	                fieldLabel: '状态',
	                maxLength : 10,
	                name: 'status'
	            },{
	                fieldLabel: '厂商',
	                maxLength : 128,
	                name: 'vender'
	            },{
	                fieldLabel: '备注',
	                minLength : 7,
	                maxLength : 11,
	                name: 'remark'
	            },{
	                fieldLabel: '增加时间',
	                maxLength : 16,
	                name: 'addTime'
	            },{
	                fieldLabel: '类型',
	                name: 'type'
	            },{
	                fieldLabel: '是否在线',
	                name: 'ifOnline'
	            },{
	                fieldLabel: 'X坐标',
	                name: 'x'
	            },{
	                fieldLabel: 'Y坐标',
	                maxLength : 128,
	                name: 'y'
	            }
	        ]
		});
		
		MyCompany.ExtDemo.serverInfoFormPanel.superclass.initComponent.apply(this);
	}
});

Gsui.reg('serverInfoFormPanel',MyCompany.ExtDemo.serverInfoFormPanel);
/**
 * 增加数据
 */
function confirmAdd(id) {
	/*var rows = Gsui.getCmp('mydemoGridPanel').getSelectionModel()
			.getSelections();// (这里this指的是gridpanel对象,如果不在本身定义内调用,可用Ext.getCmp('gridPanel的id')).getSelectionModel().getSelections();
								// //获取所有选中行,
	if (rows && rows.length > 0) {
		for ( var i = 0; i < rows.length; i++) {
			var selectedObj = rows[i];
			if (selectedObj.get("alarmStatus") == 0) {
				break;
			}
			if (i == rows.length - 1) {
				Gsui.Msg.show({
					title : _msg.hintTitle,
					msg : '请选择未确认的告警进行确认操作!',
					minWidth : 250,
					icon : Gsui.MessageBox.ERROR
				});
				return false;
			}
		}
		Gsui.Msg.confirm(_msg.hintTitle, '是否要确认告警', function(flag) {
			if (flag == 'yes') {
				var data = [];
				for ( var i = 0; i < rows.length; i++) {
					var selectedObj = rows[i];
					data.push(selectedObj.get("id"));
				}
				Gsui.Ajax.request({// 更新后台数据
					url : _app.contextPath
							+ '/journal/assetConfirmAlarm.action',
					waitMsg : '数据更新中,请稍候....',
					params : Util.param({
						'alarmLog.alarmLogIdList' : data
					}),
					success : function(response, options) {
						//var startTime = $('#startTime').val(), endTime = $('#endTime').val();
						var store = Gsui.getCmp("alarmAssetGrid").store;
						store.baseParams = {
							'page.limit' : 10,
							'page.start' : 0,
							'alarmLog.alarmTypeId' : ALARM_TYPE,
							'alarmLog.alarmLevelId' : ALARM_LEVEL,
							'alarmLog.alarmStatus' : ALARM_STATUS,
							'alarmLog.devTypeId' : 201,
							'startTime' : $('#startTime').val(),
							'endTime' : $('#endTime').val()
						};
						store.proxy.setUrl(_app.contextPath
								+ '/journal/assetDevSearch.action?aa='
								+ Math.random(), true);
						store.reload();
						Gsui.Msg.alert(_msg.hintTitle, '确认告警成功!');
					},
					scope : this
				});
			} else {
				return;
			}
		}, this);
	} else {
		Gsui.Msg.show({
			title : _msg.hintTitle,
			msg : '请选择对应的告警!',
			minWidth : 250,
			icon : Gsui.MessageBox.ERROR
		});
	}*/
}


© 著作权归作者所有

共有 人打赏支持
wenqi_arthur
粉丝 17
博文 69
码字总数 4580
作品 0
广州
私信 提问
ExtJS也玩依赖注射(DI)?

ExtJS 组件的 Xtype 大家都是了解的,就是为了方便组件的“延时渲染”而设的。类似地借助字符串标识,我们可不可以应用 Store 的引用上呢?ExtJS 3.0 提供了这方面的支持,允许我们配置组件期...

sp42
2010/04/24
0
0
ExtJS4 源码解析(一)带项目分析

Ext这个东东太大了,能看完就已经很不错了,完整的源码分析就不敢说了,大概就涉及了类管理,事件管理,数据结构缓存架构,UI组件核心机制,MVC这几个方面,只是挑着源码看的,没有实际完整的使用. 公...

文艺小青年
2017/07/06
0
0
Ext JS - Hello World

WELCOME TO EXT JS 这个向导提供了一个基本的Ext JS介绍。我们将会以一个非常简单的“hello world”例子来展开讨论。我们将以code是如何在Ext JS中组织的来开始。这个向导同时也包含了许多其...

Big_BoBo
2014/06/05
0
0
Extjs学习(1):类,布局,容器和组件的概念

命名规范 //ClassesMyCompany.form.action.AutoLoadMyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser //Source FilesExt.form.action.Submit is stored in path/to/src/Ex......

储明城
2016/02/18
81
0
ExtJs二(实现登录)

前言   在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次课程主要是通过Ext组件来实现登录。 开始动手 1.在解决方案资源管理器中选择Scrip...

aehyok
2013/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
23分钟前
1
0
HashTable和Vector为什么逐渐被废弃

HashTable,不允许键值为null,还一个就是put方法使用sychronized方法进行线程同步,单线程无需同步,多线程可用concurren包的类型。 如编程思想里面说的作为工具类,封闭性做的不好没有一个...

noob_chr
昨天
0
0
Win10 下安装Win7双系统

很多人买了预装64位Win8/8.1的电脑后想重装(或者再安装一个)Win7系统,但是折腾半天发现以前的方法根本不奏效。这是因为预装Win8/8.1的电脑统一采用了UEFI+GPT引导模式,传统的BIOS(Legacy...

yaly
昨天
2
0

中国龙-扬科
昨天
2
0
假若明天来临——《AI.未来》读后感3900字

假若明天来临——《AI.未来》读后感3900字: 你有没有想过,如果有一天你被确诊为癌症患者,你会做些什么?你有没有想过,在你百年之后,你希望你的墓碑上刻写着什么内容? 在我翻开李开复老...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部