Extjs Desktop admin 模块示例

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