PDA

View Full Version : Extjs3.2 raise javascript error(URGENT)



edwardking
2 Aug 2010, 7:58 PM
I use Ext3.2.1, I write a login page,and there is a randCode in this page,when I first run this page,the randCode can show normally,then I click this randCode,the randCode can refresh and show normally,then I click this randCode again,this time it raise javascript error:
line 1
char:1
Error: Object doesn't support this property or method
Code: 0
URL:http://localhost/testCode.jsp (http://localhost/testCode.jsp)

login.jsp source code is follows:

<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css"/> //Javascript code is here
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.form.Field.prototype.msgTarget='qtip';
Ext.QuickTips.init();
var loginForm=new Ext.FormPanel({
el: 'hello-tabs',
id: 'loginForm',
name: 'loginForm',
autoTabs: true,
activeTab: 0,
deferredRender: false,
border: false,
items:{
xtype: 'tabpanel',
activeTab: 0,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Identify',
contentEl: 'loginInfo',
layout: 'form',
defaults: {width:230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'loginId',
style: 'font-size:15px'
},{
fieldLabel: 'Password',
name: 'password',
style: 'font-size: 15px',
inputType: 'password'
},{
fieldLabel: 'randCode',
name: 'randCode',
maxLength: 4,
width: 100

}]
}
}
});
var win=new Ext.Window({
el: 'hello-win',
layout: 'fit',
width: 460,
height: 310,
closeAction: 'hide',
plain: true,
modal: true,
collapsible: true,
startCollapsed: true,
maximizable: false,
draggable: true,
closable: false,
resizable: false,
animateTarget: document.body,
items:
loginForm,
buttons:[{
text:'login'
}]
});
win.show();
var bd=Ext.getDom('randCode');
var bd2=Ext.get(bd.parentNode);
bd2.createChild({
tag:'span',
html:'<img src="test.jsp" align="absmiddle" name="randomming" style="cursor:hand" alt="click for a new randCode." /> '
});
});

function reloadcode(){
reloadcode=document.getElementById("randomming");
reloadcode.setAttribute('src','test.jsp?'+Math.random());
}
</script>


test.jsp create randCode:

<%@ page contentType="image/jpeg" import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>
<%!
Color getRandColor(int fc,int bc){
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r=fc+random.nextInt(bc-fc);
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
%>
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random random = new Random();
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
String sRand="";
for (int i=0;i<4;i++){
String rand=String.valueOf(random.nextInt(10));
sRand+=rand;
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
g.drawString(rand,13*i+6,16);
}
session.setAttribute("rand",sRand);
g.dispose();
OutputStream output=response.getOutputStream();
ImageIO.write(image, "JPEG", response.getOutputStream());
output.flush();
out.clear();
out = pageContext.pushBody();
%>


I don't know where is wrong? How to correct above code to get rid of javascipt error? Another question is above randCode only can show under IE and don't show under firefox. Why?

I am puzzled with above question for several days. Please help me!

Thanks in advance!

arthurakay
3 Aug 2010, 7:25 AM
According to jslint.com, you don't close the [] brackets on the "items" config of your tabpanel. See if that helps.

Elijah
3 Aug 2010, 8:33 AM
Curious why in the function are u setting a variable instead of just setting your target?


function reloadcode(){
// add debug for firebug
console.info(Ext.getCmp('randomming'))
// Use the Ext feature
Ext.getCmp("randomming").setAttribute('src','test.jsp?'+Math.random());
}


I would also suggest use the Firebug tool to run a simple output to see the details of the object before you randomize and then after as it sounds like the id attribute is getting wiped.