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>' + ' '+ '<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);
}
}
最终效果: