Extjs之常用控件要封装

最新推荐文章于 2018-04-25 15:37:40 发布

原创最新推荐文章于 2018-04-25 15:37:40 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #封装 #通用

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

extjs

3 篇文章

订阅专栏

本文介绍如何通过封装ExtJS简化代码，提升开发效率。通过对比封装前后代码量的变化，展示封装带来的好处，包括减少重复代码、统一界面风格及方便后期维护。

最近在学习使用ExtJS，用ExtJS做后台管理页面会使即便不懂样式，没有审美的后端程序猿也能写出不会那么丑陋的界面。

在ExtJS的世界里，所有的布局、控件基本都可以通过配置来实现。这是它的好处，但也是它比较尴尬的地方——这样虽然灵活，但要配置的东西实在太多！

来看一下不适用任何封装就使用的ExtJS做出来的登陆界面：

这个界面排除window、form，一共只有三个控件：邮箱域、密码域和登陆按钮。下面是实现这个界面所用的原始ExtJS代码：

Ext.onReady(function() {
	Ext.create('Ext.window.Window', {
		title:'后台管理',
		width:255,
		layout:'form',
		modal:true,
		resizable:false,
		iconCls:'icon-Housekey',
		autoShow: true,
		items:{
			xtype:'form',
			border:false,
			bodyStyle:{padding:'10px', background:'transparent'},
			defaults:{
				xtype:'textfield',
				labelWidth:60,
				allowBlank:false
			},
			items:[{
				fieldLabel:'邮箱',
				vtype:'email',
				name:'email',
				focusOnToFront:true,
				maxLength:100
			}, {
				inputType: 'password',
				fieldLabel:'密码',
				name:'password',
				maxLength:20
			}]
		},
		buttons:[{
			text:'登陆',
			iconCls:'icon-Key',
			listeners:{
				click:function(){
					
					var form = this.up('panel').query('form')[0].getForm();
					// 表单验证
					if(!form.isValid()){
						return;
					}
					
					// 提交表单
					form.submit({
						url:'doLogin.html',
						params:{},
						waitTitle: '请稍等...',  
                        waitMsg: '正在提交信息...', 
                        success:function(form, action){
                        	window.location.href = 'index.html';
						},
						failure:function(form, action){
							Ext.Msg.alert('提示', action.result.message);
						}
					});
					
				}
			}
		}]
	});
});

上面的代码大概有60行，且大多是一些配置外观的零碎代码。再来看一看，实现相同的界面，如果做一些简单的封装，要写哪些代码：

Ext.onReady(function() {
	
	ExtUtil.window({
		title:'后台管理',
		iconCls:'icon-Housekey',
		items:ExtUtil.form({
			defaults:{
				allowBlank:false
			},
			items:[{
				fieldLabel:'邮箱',
				vtype:'email',
				name:'email',
				focusOnToFront:true,
				maxLength:100
			}, {
				inputType: 'password',
				fieldLabel:'密码',
				name:'password',
				maxLength:20
			}]
		}),
		buttons:[ExtUtil.button('登陆', 'icon-Key', function(){
			var form = this.up('panel').query('form')[0].getForm();
			
			// 表单验证
			if(form.isValid()){
				ExtUtil.submit(form, 'doLogin.html', function(){
					window.location.href = 'index.html';
				});
			}
		})]
	}, false);
	
});

这是封装后的代码，只有35行。当然，这35行并不包括封装代码，下面贴出封装的代码：

/**
 * Ext通用组件封装
 * */
;(function(){
	var ExtUtil = window.ExtUtil = window.ExtUtil || {};
	
	// 消息框
	ExtUtil.alert = function(msg){
		return Ext.Msg.alert({
			title:'提示',
			iconCls:'icon-Error',
			msg:msg,
	        buttons:Ext.MessageBox.OK,
	        icon:Ext.MessageBox.WARNING
		});
	};
	
	// 按钮
	ExtUtil.button = function(txt, icon, fn){
		fn = typeof icon == 'function' ? icon : fn;
		
		return Ext.create('Ext.button.Button', {
			text : txt,
			iconCls : icon,
			listeners : {
				click : fn
			}
		});
	};
	
	// 确认框
	ExtUtil.confirm = function(msg, fn){
		return Ext.Msg.show({
	        title: '操作确认',
	        msg: msg,
	        iconCls:'icon-Help',
	        icon:Ext.MessageBox.QUESTION,
	        buttons:Ext.MessageBox.YESNO,
	        defaultFocus:Ext.MessageBox.NO,
	        fn:function(yes){
	        	if(yes == 'yes'){
	        		fn.apply(this, this.arguments);
	        	}
	        }
	    });
	};
	
	// form表单
	ExtUtil.form = function(options){
		
		// 合并用户配置与默认配置
		options = Ext.merge({
			layout:'form',
			border:false,
			bodyStyle:{padding:'10px', background:'transparent'},
			defaults:{
				xtype:'textfield',
				labelWidth:60
			}
		}, options);
		
		return Ext.create('Ext.form.Panel', options);
		
	};

	// 表单提交
	ExtUtil.submit = function(form, url, success, failure){
		return form.submit({
			url:url,
			waitTitle: '请稍等...',  
            waitMsg: '正在提交信息...', 
            success:success,
			failure:failure || function(form, action){
				ExtUtil.alert( action.result && action.result.message || '哎呀，系统出问题了！');
			}
		});
	};
	
	// 公用对话框
	ExtUtil.window = function(options, cancelBtn){

		// 合并用户配置与默认配置
		options = Ext.merge({
			layout:'fit',
			width:355,
			modal:true,
			resizable:false,
			autoShow: true
		}, options);
		
		// 根据用户配置决定是否加入取消按钮
		if(cancelBtn !== false){
			var btn = {
				text:'取消',
				iconCls:'icon-Doorout',
				listeners:{
					click:function(){
						this.up('panel').close();
					}
				}
			};
			
			if(Ext.isArray(options.buttons)){
				options.buttons.push(btn);
			}else if(options.buttons){
				var array = [options.buttons, btn];
				options.buttons = array;
			}
		}
		
		return Ext.create('Ext.window.Window', options);
	};
})();

上面是对ExtJS做简单封装的代码，只有100行。也许你会认为，100 + 35 是远大于60行代码的。但是，试想在一个工程中，这样简单的100行封装代码，就能为你在一个极其简单的页面中节省25行代码。当你的工程规模不断扩大时，节省代码量可以说是不可估量的！更为关键的是，在封装代码中，稍微简单的提供了alert、confirm、表单提交提示消息等等统一的设置，可以保证你的项目是对外统一的界面；另一方面，假设你今天alert的标题设置成了“提示”，但是改天客户要求把标题改成“警告”，难道你要把在数百个页面中上千个alert对话框的标题一个一个的修改成“警告”吗？

上面的封装还做了另一件事，那就是更多的情况下，类似于关闭对话框的“取消按钮”，表单提交的失败处理handler等等，通常在整个工程中会有比较一致处理，而在封装的代码里提供这些处理，我们就不必再关心这些问题，同时也利于后期随时修改处理方式。