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等等，通常在整个工程中会有比较一致处理，而在封装的代码里提供这些处理，我们就不必再关心这些问题，同时也利于后期随时修改处理方式。