ExtJS 验证码 浏览器兼容

ExtJS布局浏览器兼容问题

 

在写ExtJS前台进行布局时由于ExtJS本身的布局管理器会产生默认的一些布局样式，但是由于不同浏览器的对不同ExtJS的解释不同造成了浏览器的兼容问题，这样需要我们在特定的地方设定特定的样式，以兼容不同的浏览器例如IE浏览器。

例1：Panle的html元素造成的浏览器不兼容

var leftpanel = new Ext.Panel({
		columnWidth:.5,
		autoHeight:true,
		border:false,
		heigth:'100%',
		bodyStyle:'background:#D4E1F2;',
		layout:'fit',
		//只能在chrome中使用的方法
		html:'<div style="height:100%;position:relative;top:100px;">' +
				  '<div style="margin-left:40px;top:30px;font-size:25px;color:#008127;font-weight:bold;">' +
				  		  'xxxxxx测算系统' +
				  '</div>' +
				  '<div style="height:150px;font-size:15px;margin-left:40px;margin-top:10px;>' +
				          '<p style="margin-top:10px;">1-以《xxxxxxxxxx》（UNFCCC）下“xxxxxxxxxx”的方法学模板为基础</p>' +
				  		  '<p style="margin-top:10px;">2-xxxxxxxxxx（xx）xxxxx</p>' +
		  		   		  '<p style="margin-top:10px;">3-xxxxxxxx《xxxxxxxxxxxxxx》</p>' +
				  '</div>'+
				  '<div style="height:150px;margin-top:10px;margin-left:120px;">' +
					  	'<img alt="使用说明" id="instruction" src="./images/computer.png"/><span><a href="#">使用说明</a></span>' +
					  	'&nbsp;&nbsp;&nbsp;'+
					  	'<img alt="在线客服" id="service" src="./images/user_red.png"/><span><a href="#">使用说明</a></span>'+
				  '</div>'+
			'</div>' 
	});

 这里有一些必要设的样式：style="height:150px;如果不设置在IE浏览器中将显示不出来，但是在chrome中可以显示出来。

例2：未设置相应的属性造成的浏览器不兼容，例如下的前台验证码在IE下不能正常显示

var formpanel = new Ext.FormPanel({
		columnWidth:.5,
		autoHeight:true,//如果是100%相当于制定高需要设置为false
		buttonAlign:'left',
		bodyStyle:'background-color:#D4E1F2;',
		style:'margin:100px 5px 15px 40px;background:#D4E1F2;',
		height:'100%',
		border:false,
		items:[
		{
			xtype:'label',
			text:'系统后台登陆',
			style:'margin-left:40px;font-size:25px;font-weight:bold;color:#008127;'
		},{
			xtype:'textfield',
			fieldLabel:'用户名',
			labelStyle:'font-size:15px;text-align:right;top:5px;',
			name:'username',
			id:'username',
			style:'margin-top:10px',
			width:'200',
			allowBlank:'用户名不能为空',
			minLength:6,
			minLengthText:'用户名长度为[6-20]',
			maxLength:20,
			maxLength:'用户名长度为[6-20]'
		},{
			xtype:'textfield',
			intputType:'password',
			fieldLabel:'密码',
			labelStyle:'font-size:15px;text-align:right;top:5px;',
			style:'margin-top:10px',
			name:'username',
			id:'passwd',
			width:'200',
			allowBlank:'用户名不能为空',
			minLength:6,
			minLengthText:'用户名长度为[6-20]',
			maxLength:20,
			maxLength:'用户名长度为[6-20]'
		},{
			xtype:'textfield',
			fieldLabel:'验证码',
			labelStyle:'font-size:15px;text-align:right;top:5px;',
			id:'randCode',
			style:'margin-top:5px',
			name:'val',
			allowBlank:false,
			blankText:'验证码不能为空'
		}
		],
		buttons:[
		{	
			text:'登陆',
			style:'margin-left:60px;margin-top:10px',
			handler:function()
			{
				if(!formpanel.getForm().isValid()) return;
				formpanel.getForm().submit();
			}
		},
		{
			xtype:'button',
			text:'重设',
			style:'margin-top:10px',
			handler:function()
			{
				if(!formpanel.getForm().isValid()) return;
				formpanel.getForm().submit();
			}
		},{
			text:'注册',
			style:'margin-top:10px',
			handler:function()
			{
				if(!formpanel.getForm().isValid()) return;
				formpanel.getForm().submit();
			}
		}
		]
	});//end_form

 

var rc = Ext.getDom("randCode");

var rcp = Ext.get(rc.parentNode);

    rcp.createChild([{

       tag:'span',

       //height:'25px',

       width:'100%',

       autoHeight:false,

       html:'<astyle="padding-left:5px;height:30px;"href="javascript:reloadcode();">'

    },{

       tag:'img',

       //width:'70px',

       height:'25px',

       id:'img',

       src:'CheckCodeServlet.do',

       align:'absbottom'

 生成验证码的代码：

package org.hj.sevlet.login;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * @author DingJie
 */
public class CheckCodeServlet extends HttpServlet {

	private static final long serialVersionUID = 334172696087613109L;

	/**
	 * 设定验证码位数
	 * @param size
	 * @return
	 */
	private String getNumber(int size) {
		String str = "";
		char[] chars = new char[36];
		for (int i = 0; i < chars.length; i++) {
			chars[i] = (char) ('A' + i);
			if (i > 25) {
				chars[i] = (char) ((i - 26) + '0');
			}
		}
		Random random = new Random();
		for (int i = 0; i < size; i++) {
			str += chars[random.nextInt(chars.length)];
		}
		return str;
	}
	
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		//设置缓存不保留
		response.setHeader("Pragma","No-cache");
		response.setHeader("Cahce-Control","no-cache");
		response.setDateHeader("Expires",0);
		System.out.println("service running...");
		// S1、创建一个内存映射对象
		BufferedImage image = new BufferedImage(60, 20,
				BufferedImage.TYPE_INT_BGR);
		// S2、获得画笔
		Graphics graphics = image.getGraphics();
		// 给画笔上色
		Random ran = new Random();
		String number = getNumber(4);// 设定验证码4位数
		HttpSession session = request.getSession();
		session.setAttribute("number", number);//设置到session中
		graphics.setColor(new Color(ran.nextInt(256), ran.nextInt(256), ran
				.nextInt(256)));
		// S3、设置背景色
		graphics.fillRect(0, 0, 60, 20);
		// S4、绘画
		// String number=ran.nextInt(99999)+"";
		graphics.setColor(new Color(0, 0, 0));
		graphics.drawString(number, 10, 15);
		// 添加干扰线
		for (int i = 0; i < 3; i++) {
			graphics.setColor(new Color(ran.nextInt(256), ran.nextInt(256), ran
					.nextInt(256)));
			graphics.drawLine(ran.nextInt(60), ran.nextInt(20),
					ran.nextInt(60), ran.nextInt(20));
		}
		// S5、将图片压缩并发送到浏览器
		// 设置content-type消息头，告诉浏览器返回的数据的类型
		response.setContentType("image/jpeg");
		OutputStream outputStream = response.getOutputStream();
		javax.imageio.ImageIO.write(image, "jpeg", outputStream);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doGet(req, resp);
	}
}

 最终效果：