ExtJS4图片验证码的实现

时间：2023-03-09 08:17:23
ExtJS4图片验证码的实现

ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

转自：http://blog.sina.com.cn/s/blog_8d4bbd890100xaxh.html

   

上多少篇文章，重要学习了Extjs4 Grid的使用方法，从本篇开端，我们开始其余组件的学习，使用。在登录、注册甚至是发表文章或帖子的时候，都会用到验证码这个货色，那么在EXTJS 中，能够使用验证码功能么？谜底是确定的，在EXTJS4之前，也有良多验证码的实现，在Extjs4中，验证码到底如何实现呢？

临时，我们将验证码组件，命名为CheckCode。此组件继续自Ext.form.field.Text，在实现之前，我们须要写两个款式，分辨用来把持验证码的输入框跟验证码图片的大小。

CSS样式为：

  1. #CheckCode{ float:left;}
  2. .x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointer; float:left; margin-left:7px;}

记住这两个样式的定义，后面，我们会用到它。

验证码的JS代码：

  1. Ext.define('SMS.view.CheckCode',{
  2. extend: 'Ext.form.field.Text',
  3. alias: 'widget.checkcode',
  4. inputTyle:'codefield',
  5. codeUrl:Ext.BLANK_IMAGE_URL,
  6. isLoader:true,
  7. onRender:function(ct,position){
  8. this.callParent(arguments);
  9. this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
  10. this.codeEl.addCls('x-form-code');
  11. this.codeEl.on('click', this.loadCodeImg, this);
  12. if (this.isLoader) this.loadCodeImg();
  13. },
  14. alignErrorIcon: function() {
  15. this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
  16. },
  17. loadCodeImg: function() {
  18. this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
  19. }
  20. })

以上代码中，定义了一个“类”，名字是：SMS.view.CheckCode，实在这个名字，相称于extjs 3.x之中的命名空间，以前也提到过。它继承自Ext.form.field.Text，在它的onRender中，我们写了一些代码。其中this.callParent(arguments);  取代了xxxx.superclass.onRender.call(this, ct, position);在Ext.form.field.Text的基本上，应用createChild方式，创建了一个图片，并为其增加了一个名为x- form-code，而后，给其创立了一个click事件，这个事件实现的功能是，当咱们点击验证码图片时，换另外一张图片，也就是常说的：“看不清？换 一张功能。”，最后，假如isLoader为True时，调用loadCodeImg办法。至此，验证码功效全体实现了。下面，我们看看如何使用。

新建Login.js文件，定义“类”SMS.view.Login，其全部代码为：

  1. Ext.define('SMS.view.Login',{
  2. extend:'Ext.window.Window',
  3. alias: 'widget.loginForm',
  4. requires: ['Ext.form.*','SMS.view.CheckCode'],
  5. initComponent:function(){
  6. var checkcode = Ext.create('SMS.view.CheckCode',{
  7. cls : 'key',
  8. fieldLabel : '验证码',
  9. name : 'CheckCode',
  10. id : 'CheckCode',
  11. allowBlank : false,
  12. isLoader:true,
  13. blankText : '验证码不能为空',
  14. codeUrl: '/include/checkCode.asp',
  15. width : 160
  16. })
  17. var form = Ext.widget('form',{
  18. border: false,
  19. bodyPadding: 10,
  20. fieldDefaults: {
  21. labelAlign: 'left',
  22. labelWidth: 55,
  23. labelStyle: 'font-weight:bold'
  24. },
  25. defaults: {
  26. margins: '0 0 10 0'
  27. },
  28. items:[{
  29. xtype: 'textfield',
  30. fieldLabel: '用户名',
  31. blankText : '用户名不能为空',
  32. allowBlank: false,
  33. width:240
  34. },{
  35. xtype: 'textfield',
  36. fieldLabel: '密   码',
  37. allowBlank: false,
  38. blankText : '密码不能为空',
  39. width:240,
  40. inputType : 'password'
  41. },checkcode],
  42. buttons:[{
  43. text:'登录',
  44. handler:function(){
  45. }
  46. },{
  47. text:'取消',
  48. handler:function(){
  49. }
  50. }]
  51. })
  52. Ext.apply(this,{
  53. height: 160,
  54. width: 280,
  55. title: '用户登陆',
  56. closeAction: 'hide',
  57. closable : false,
  58. iconCls: 'login',
  59. layout: 'fit',
  60. modal : true,
  61. plain : true,
  62. resizable: false,
  63. items:form
  64. });
  65. this.callParent(arguments);
  66. }
  67. });

而后在主页面的代码中调用此LoginWindow。

相关文章