Extjs4.0.7 关于验证码的C#兑现
日期：2014-05-16 浏览次数：20393 次
直接上传原码，大家自己去慢慢理解吧。该文章只是讲解了验证码的简单实现和原理，希望大家通过它设计出更绚丽的界面。
如有不对的地方希望大家指正。
1、css文件checkcode.css （定义验证码图片的显示大小）
#CheckCode{ float:left;}
.x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointer; float:left; margin-left:7px;}
2、html文件（建立登陆页面）
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>V3系统登陆</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CSS/css.css" />
<link rel="stylesheet" type="text/css" href="/CSS/checkcode.css" />
<script type="text/javascript" src="/extjs4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/js/v3login.js"></script>
<style type="text/css">body{
background-image:url(/images/eg_bg_06.gif);
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
3、Extjs文件 v3login.js （Extjs的具体实现，登陆采用Form的形式）
Ext.BLANK_IMAGE_URL = 'images/s.gif';
Ext.define('myCheckCode',{
extend: 'Ext.form.field.Text',
alias: 'widget.checkcode',
inputTyle:'codefield',
codeUrl:Ext.BLANK_IMAGE_URL,
isLoader:true,
onRender:function(ct,position){
this.callParent(arguments);
this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
this.codeEl.addCls('x-form-code');
this.codeEl.on('click', this.loadCodeImg, this);
if (this.isLoader) this.loadCodeImg();
},
alignErrorIcon: function() {
this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
},
loadCodeImg: function() {
this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
}
})
var checkcode = Ext.create('myCheckCode',{
cls : 'key',
fieldLabel : '验证码',
name : 'CheckCode',
id : 'CheckCode',
allowBlank : false,
isLoader:true,
blankText : '验证码不能为空',
codeUrl: '/ckc.ashx',
//labelStyle: 'font-weight:bold;padding:0',
labelWidth:70,
//height:70,
labelAlign: 'right',
width : 150
})
var Login = function(){
var Login_Form = Ext.create('Ext.form.Panel', {
id:'Login_Form',
frame: true,
//layout: 'anchor', //该form分为两列
bodyPadding: 5,
baseCls: "x-plain", //指定使用系统背景色
//defaults: { anchor: "95%", msgTarget: "side" },
fieldDefaults: {
labelAlign: 'left'
//labelWidth: 90,
//anchor: '100%'
},
items:[{
xtype: 'fieldcontainer',
labelStyle: 'font-weight:bold;padding:0',
width:400,
height:100,
x:-40,
y:-8,
labelWidth: 300,
labelHeight:100,
readOnly:true,
style:{
