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);
}
}
最终效果：