Extjs Desktop admin 模块示例_mychirs的博客-程序员秘密

技术标签: desktop  web  rowEditor  插件  column  Extjs  

admin模块目前下有四个子模块:members,group,wallpapers,themes

这节讲members子模块


使用了rowEditor插件,会自动找出设置了editor的列,修改完成会自动复原


desktop框架会根据user的语言选择加载本地化文件,用户所在组决定了用户的权限.

/*
admin子模块
*/
QoDesk.QoAdmin.Members = Ext.extend(Ext.grid.GridPanel, {
	ownerModule: null,
	constructor: function(config) {
		config = config || {};
		this.ownerModule = config.ownerModule;
		this.folder = config.folder;
		this.locale = config.locale || {};
		//var isZh = function(){return this.locale.language.toLowerCase().indexOf('zh') > -1;};
		var searchField = new Ext.form.TextField({
			width:150,
			emptyText:this.locale.keyword,
			enableKeyEvents: true,
			style: {
				paddingBottom:'4px',
				marginLeft:'10px',
				marginRight:'5px'
			},
			checkKeyCode:function(keyCode){
				return ((keyCode>=48 && keyCode<=57)||(keyCode>=65 && keyCode<=90)||(keyCode>=97 && keyCode<=121) || keyCode==8 || keyCode==46 || keyCode==17 || keyCode==0)
			},
			listeners:{
				keyup: {
					fn:function(textField,e){
						if(textField.checkKeyCode(e.browserEvent.which)){
							this.getStore().clearFilter();
							if(textField.getValue().length > 1){
								this.getStore().filterBy(function(record,id){
									var val = textField.getValue().trim().toLowerCase(),
											inEmail = record.data.email.toLowerCase().indexOf(val) > -1,
											inName = typeof record.data.name == 'string' ? record.data.name.toLowerCase().indexOf(val) > -1 : false,
											inFirstName = typeof record.data.firstName == 'string' ? record.data.firstName.toLowerCase().indexOf(val) > -1 : false,
											inLastName = typeof record.data.lastName == 'string' ? record.data.lastName.toLowerCase().indexOf(val) > -1 : false;
									return inEmail || inName || inFirstName || inLastName;
								});
							}
						}
					},
					buffer: 350,
					scope: this
				},
				scope: this
			}
		});
		var groupArray = [[1,'Administrator'],[2,'Demo']],
				localeArray = [['en','English'],['zh_cn','ZH Simplified'],['zh_tw','ZH Traditional']];
		var records = Ext.data.Record.create([{
			name: 'id',
			type: 'integer'
		}, {
			name: 'groupID',
			type: 'integer'
		}, {
			name: 'firstName',
			type: 'string'
		}, {
			name: 'lastName',
			type: 'string'
		}, {
			name: 'email',
			type: 'string'
		}, {
			name: 'locale',
			type: 'string'
		}, {
			name: 'active',
			type: 'bool'
		}, {
			name: 'addDate',
			type: 'string'
		}]);
		var cm = new Ext.grid.ColumnModel([{
			id:'id',
			header: this.locale.gridHeader.id,
			dataIndex: 'id',
			sortable: true,
			hidden:true
		}, {
			id:'firstName',
			header:this.locale.gridHeader.firstName,
			dataIndex: 'firstName',
			editor: {
				allowBlank: false,
				xtype: 'textfield'
			},
			hidden:true,
			sortable: true
		}, {
			id:'lastName',
			header:this.locale.gridHeader.lastName,
			dataIndex: 'lastName',
			editor: {
				allowBlank: false,
				xtype: 'textfield'
			},
			hidden:true,
			sortable: true
		},{
			id:'name',
			header:this.locale.gridHeader.name,
			renderer:function(value, metaData, record, rowIndex, colIndex, store){
				return record.data.lastName+record.data.firstName;
			},
			sortable: true
		},{
			id: 'groupID',
			header: this.locale.gridHeader.groupName,
			dataIndex: 'groupID',
			sortable: true,
			renderer:function(value, metaData, record, rowIndex, colIndex, store) {
				return value === 1 ? 'Administrator' : 'Demo';
			},
			editor: new Ext.form.ComboBox({
				typeAhead: true,
				triggerAction: 'all',
				lazyRender: true,
		    mode: 'local',
		    store: new Ext.data.ArrayStore({
		    	fields:['groupID','groupName'],
		    	data:groupArray
		    }),
		    valueField: 'groupID',
		    displayField: 'groupName'
			}),
		}, {
			id: 'email',
			header:this.locale.gridHeader.email,
			dataIndex: 'email',
			editor: {
				allowBlank: false,
				vtype: 'email',
				xtype: 'textfield'
			},
			sortable: true
		}, {
			id:'locale',
			header:this.locale.gridHeader.locale,
			dataIndex: 'locale',
			editor: new Ext.form.ComboBox({
				typeAhead: true,
				triggerAction: 'all',
				lazyRender: true,
		    mode: 'local',
		    store: new Ext.data.ArrayStore({
		    	id: 0,
		    	fields:['language','localeText'],
		    	data:localeArray
		    }),
		    valueField: 'language',
		    displayField: 'localeText'
			}),
			sortable: true,
			width:80
		}, {
			id:'addDate',
			header:this.locale.gridHeader.addDate,
			dataIndex: 'addDate',
			sortable: true
		}, {
			id:'active',
			header:this.locale.gridHeader.active,
			dataIndex: 'active',
			editor: {
				xtype: 'checkbox'
			},
			falseText:this.locale.falseText,
			trueText:this.locale.trueText,
			sortable: true,
			xtype: 'booleancolumn',
			width:50
		}]);
		cm.defaultSortable = true;
		var store = new Ext.data.JsonStore({
			autoSave: false,
			fields: records,
			idProperty: 'id',
			root: 'rs',
			url: this.ownerModule.app.moduleFolder+this.folder+'server/' + this.ownerModule.app.serverFileType + '/getUserList.' + this.ownerModule.app.serverFileType
		});
    var editor = new Ext.ux.grid.RowEditor({
			saveText:this.locale.rowEditor.saveText,
			cancelText:this.locale.rowEditor.cancelText,
			commitChangesText:this.locale.rowEditor.commitChangesText,
			errorText:this.locale.rowEditor.errorText
    });
    editor.on({
	    'afteredit':{
    		fn:function(editor,changes,r,rowIdx){
    			var params = changes;
    			params.id = typeof(r.id) === 'number' ? r.id : 0;
					this.onSaveRow(Ext.apply(params,r.data));
	    	},
	    	scope:this
	    },
	    'canceledit':{
	    	fn:function(editor,hasChange){
					if(this.store.getAt(0).data === this.blankRow){
						this.store.removeAt(0);
					}
					this.deleteBtn.enable();
		   	},
		   	scope:this
		  },
	    'beforeedit':{
	    	fn:function(editor,hasChange){
					this.deleteBtn.disable();
		   	},
		   	scope:this
		  }
    });
		Ext.applyIf(config, {
			border: false,
			bbar: new Ext.PagingToolbar({
				displayInfo: true,
				displayMsg:this.locale.tbar.displayMsg,
				emptyMsg:this.locale.tbar.emptyMsg,
				pageSize: 30,
				store: store
			}),
			closable: true,
			cm: cm,
			autoExpandColumn:'email',
			id: 'qo-admin-members',
			stripeRows: true,
			loadMask: true,
			store: store,
			tbar: [{
				disabled:!this.ownerModule.app.isAllowedTo('addMember', this.ownerModule.name),
				handler: this.onAddClick,
				iconCls: 'qo-admin-add-icon-16',
				width:60,
				height:30,
				scope: this,
				text:this.locale.tbar.menu.add.text,
				tooltip:this.locale.tbar.menu.add.tooltip
			}, '-',
			{
				disabled: true,
				handler:function(){
					if (this.ownerModule.app.isAllowedTo('deleteMember', this.ownerModule.name)){
						Ext.Msg.show({
							title:this.locale.confirmTitle,
							msg:this.locale.action.deleteRow.confirmMsg,
							modal: true,
							width:300,
							height:100,
							fn:this.onDeleteRow,
							scope:this,
							icon:Ext.Msg.QUESTION,
							buttons:Ext.Msg.OKCANCEL
						});
					}else{
						Ext.alert(this.locale.alertTitle,this.locale.action.deleteRow.noPrivilegeMsg)
					}
				},
				iconCls: 'qo-admin-delete-icon-16',
				width:60,
				height:30,
				ref: '../deleteBtn',
				scope: this,
				text:this.locale.tbar.menu.delete.text,
				tooltip:this.locale.tbar.menu.delete.tooltip
			}, '-', '->',{
				text:this.locale.searchBy,
				xtype: 'tbtext'
			}, searchField],
			title:this.locale.title,
			plugins: [editor],
			blankRow:{
				groupID:2,
				lastName: '',
				firstName: '',
				email:'',
				locale:'en',
				addDate:new Date().format('Y-m-d'),
				active: true
			},
			viewConfig: {
				emptyText:this.locale.viewConfig.emptyText,
				getRowClass: function(r) {
					var d = r.data;
					if (!d.active) {
						return 'qo-admin-inactive'
					}
					return ''
				}
			}
		});
		QoDesk.QoAdmin.Members.superclass.constructor.call(this, config);
		this.on({
			'render': {
				fn: function() {
					this.getStore().load();
				},
				scope: this,
				single: true
			}
		});
		this.getSelectionModel().on('selectionchange', this.onSelectionChange, this)
	},
	onDeleteRow:function(btn){
		if (btn === 'cancel' || !this.ownerModule.app.isAllowedTo('deleteMember', this.ownerModule.name)) return
		var rec = this.getSelectionModel().getSelected();
		if (rec) {
			this.showMask(this.locale.deleteMaskText);
			Ext.Ajax.request({
				url:this.ownerModule.app.moduleFolder+this.folder+'server/' + this.ownerModule.app.serverFileType + '/deleteUser.' + this.ownerModule.app.serverFileType,
				method:'POST',
				params:{id:rec.data.id},
				callback:function(options,success,response){
					var retObj = eval('('+response.responseText+')');
					if(!retObj.success){
						switch(retObj.value){
							case 0:
		            Ext.alert(this.locale.errorTitle,this.locale.action.illegalID);
								break;
							default:
		            Ext.alert(this.locale.errorTitle,this.locale.unknowErrorMsg);
						}
					}else{
						this.getStore().remove(rec);
					}
					this.hideMask();
				},
				scope:this
			});
		}
	},
	onSaveRow:function(params){
		if(params.id === 0 && !this.ownerModule.app.isAllowedTo('addMember', this.ownerModule.name)) return
		if(params.id !== 0 && !this.ownerModule.app.isAllowedTo('editMember', this.ownerModule.name)) return
		params.active = params.active ? 1 : 0;
		this.showMask(this.locale.saveMaskText);
		Ext.Ajax.request({
			url:this.ownerModule.app.moduleFolder+this.folder+'server/' + this.ownerModule.app.serverFileType + '/saveUserInfo.' + this.ownerModule.app.serverFileType,
			method:'POST',
			params:params,
			callback:function(options,success,response){
				var retObj = eval('('+response.responseText+')');
				if(!retObj.success){
					if(params.id !== 0) this.getStore().reload();
					switch(retObj.value){
						case -2:
							Ext.alert(this.locale.errorTitle,this.locale.action.saveRow.usedEmail);
							break;
						case -1:
	            Ext.alert(this.locale.errorTitle,this.locale.action.illegalID);
							break;
						default:
	            Ext.alert(this.locale.errorTitle,this.locale.unknowErrorMsg);
					}
				}
				this.hideMask();
			},
			scope:this
		});
	},
	onAddClick: function(){
		if(this.ownerModule.app.isAllowedTo('addMember', this.ownerModule.name)){
			var u = new this.store.recordType(this.blankRow);
			var editor = this.plugins[0];
			editor.stopEditing();
			this.store.insert(0, u);
			editor.startEditing(0,true);
		}
	},
	onSelectionChange: function(sm){
		if (sm.hasSelection() && this.ownerModule.app.isAllowedTo('deleteMember', this.ownerModule.name)) {
			this.deleteBtn.enable()
		}
	},
	showMask: function(msg) {
		this.body.mask(msg || this.locale.defaultMaskText, '')
	},
	hideMask: function() {
		this.body.unmask()
	}
});
QoDesk.QoAdmin.Members.required=[{
	'url':'share/rowEditor/rowEditor.html'
}];


还有什么可说的呢?好像没了吧!我的QQ:623076512

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mychirs/article/details/38922491

智能推荐

计算机组成原理袁春风第五章,计算机组成原理 [袁春风]chap5homework_神楽坂喵的博客-程序员秘密

计算机组成原理 [袁春风]chap5homework (6页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!17.90 积分1 第5章 指令系统作业 南京大学计算机系 多媒体技术研究所 袁春风 南京大学计算机系 多媒体技术研究所 袁春风2 第一次作业(2001/11/23) (1)书中习题1、2、5、9、10 (2)解释下列名词: 机器语言指令集操作码地...

输入两个字符串,从第一字符串中删除第二个字符串中所有的字符_mmbbz的博客-程序员秘密

http://www.bkjia.com/Javabc/777601.html剑指offer上的字符串相关题目。题目:输入两个字符串,从第一字符串中删除第二个字符串中所有的字符。例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.”。这里主要要分析两个方面:1、如何判断那些字符是需要删除的字符。同很多字符串问题

Linux信号(signal) 机制分析_weixin_30566063的博客-程序员秘密

from:https://www.cnblogs.com/subo_peng/p/5325326.html【摘要】本文分析了Linux内核对于信号的实现机制和应用层 的相关处理。首先介绍了软中断信号的本质及信号的两种不同分类方法尤其是不可靠信号的原理。接着分析了内核对于信号的处理流程包括信号的触发/注册/执行 及注销等。最后介绍了应用层的相关处理,主要包括信号处理函数的安装、...

shell处理文件时的笔记(关于指定路径问题)_龙雪Zzz的博客-程序员秘密

凡是最好都得用绝对路径,除非该shell在某个目录下,才可以使用一个单文件名或文件夹名进行衍生路径指明或其他的文件操作。

Ubuntu安装go语言环境配置_baidu_40836478的博客-程序员秘密

Ubuntu安装go语言环境配置go语言环境配置下载安装包在/usr/local下安装程序在根目录下新建一个文件夹 命名为 GOPATH配置全局变量使修改生效验证卸载旧包go语言环境配置本文将介绍在Ubuntu18.04环境下安装和配置go语言环境,go语言的版本为go1.10.4。下载安装包对于64位的Linux $ wget https://storage.googleapis.com/golang/go1.10.4.linux-amd64.tar.gz对于32位的Linux$ wget

NYOJ--20--搜索(dfs)--吝啬的国度_weixin_30555753的博客-程序员秘密

题意,N座城市有N-1条路,目的是找到哪个城市可以到目的城市//NYOJ--search--吝啬的国度#include&lt;iostream&gt;#include&lt;vector&gt;#include&lt;cstring&gt;using namespace std;vector&lt;int&gt; city[100005];int road[10...

随便推点

【C语言常识】Keil MDK的分散加载文件.sct_er_irom1_无痕幽雨的博客-程序员秘密

出处:http://blog.csdn.net/tracing/article/details/9720157面对这样一个新东西,先去官网看看,或者看看IDE的帮助,基本上你想要的东西都有了,BAIDU来的都不全面,这是一种学习方法。    http://www.keil.com/support/man/docs/armlink/armlink_BABDDH

美团在ACL2021上提出基于对比学习的文本表示模型,效果提升8%_zenRRan的博客-程序员秘密

点击下面卡片,关注我呀,每天给你送来AI技术干货!来自:美团技术团队尽管基于BERT的模型在NLP诸多下游任务中取得了成功,直接从BERT导出的句向量表示往往被约束在一个很小的区域内,表现...

jsp中获取根路径的方法_jsp获取项目根路径_Sigma_i的博客-程序员秘密

1.${pageContext.request.contextPath}pageContext本身就是一个域对象,他表示当前JSP页面的运行环境,该对象可以操作另外三个域(Request域,Session域,ServletContext域)这里,pageContext对象中有getRequest()方法,所以,在使用el表达式时,省略get,并将Request变成小写,即pageC

Springboot整合WebSocket实现网页版聊天,快来围观!_web聊天源码_Cansluck的博客-程序员秘密

前几天写了一篇《SpringBoot快速入门》一文,然后周末趁着有时间,在这个Springboot框架基础上整合了WebSocket技术写了一个网页版聊天功能。 如果小伙伴找不到那套框架了,可以看下之前的文章找到Springboot快速入门一文往期推荐Springboot 完整搭建快速入门,必看!通过该文章可以了解服务端与客户端之间的通信机制,以及了解相关的Http协议等技术内容。话不多说,先来看看运行的过程:页面写的十分简单,后续也...

【华为云-上云之路】 连接华为云资源nlp_小刘同学的博客的博客-程序员秘密

本文是主要是记录博主连接nlp资源踩下的坑,以及分享一些注意事项.

【题解】 CCF CSP 202104-2 —— 邻域均值_ccf领域均值c++_峰峰打怪兽的博客-程序员秘密

#include &lt;iostream&gt;#include &lt;cmath&gt;using namespace std;bool Judge(int **A, int n, int r, int t, int i, int j, double &amp;exist_sum, int &amp;exist_y0, int &amp;exist_y1){ double sum = 0; int count = 0; double average; int x0, y0, x1.

推荐文章

热门文章

相关标签