PDA

View Full Version : [CLOSED-804] Script error on IE on cmp.removeAll()



stephen.friedrich
27 Jan 2010, 6:18 AM
I (mis-?) used the formlayout to layout buttons aligned to the fields.
Works fine in FF and IE 8.

In IE 6 however that crashes when the components are removed.
Here's a link for testing: http://www.eekboom.de/test.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>ExtJS Test</title>

<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/resources/css/ext-all.css"/>

<script type="text/javascript" src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/ext-all.js"></script>
</head>

<body>
<div id="panel"></div>

<div style="margin-top: 30px">Clicking this will cause a script error in IE 6:</div>
<div id="button"></div>
</body>

<script language="JavaScript">
Ext.onReady(function(){
Ext.override(Ext.layout.FormLayout, {
labelSeparator : ''
});

new Ext.Panel({
id: 'main-content',
renderTo: 'panel',
layout: 'fit',
height: 100,
items: [
{
xtype: 'form',
title: 'Test Panel',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
value: 'Foo'
},
{
xtype: 'button',
text: 'Save',
fieldLabel: ' '
}
]
}
]
});

new Ext.Button({
text: 'Remove Panel',
handler: function() {
var mainContent = Ext.getCmp('main-content');
mainContent.removeAll();
},
renderTo: 'button'
});
});
</script>
</html>

E_lexy
23 Mar 2010, 6:37 AM
I have a similar problem where I load window content from an Ajax call before which I 'clear' the window. The content of the window is a form which is generated through the Symfony forms framework. Works fine in all recent browsers but not in IE6. We did recently upgrade to Extjs 3.1.1. Any similarities with your situation?

I'll post when I have found a solution.


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
var win;
var updateZone;
var updateUrl;

// standard popup window used for
// discussions, actions,

//Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

if(!win){

win = new Ext.Window({
id : 'popup',
layout : 'form',
width : 500,
minHeight : 400,
//x : 250,
y : 160,
autoHeight : true,
autoScroll : true,
closeAction :'hide',
plain : true,
modal : true,
addFromXHR: function(url, params) {
Ext.Ajax.request({
url: url,
params: params,
method: 'GET',
timeout: 7000,
success: function(response) {
debugger;
// remove old content
var res = win.removeAll(true);
console.log("removeAll %s", res);
//win.getBottomToolbar().destroy();
win.doLayout(false, true);
win.show();
// add new content from Json
win.add(eval("(" + response.responseText + ")"));
console.log("win: %s", win);
// apply the content
win.doLayout(false, true);
}
});
}
});


}

Ext.onReady(function(){
Ext.QuickTips.init();

win.render(Ext.getBody());
})

// here we create the universal submit button
Ext.namespace('Ext.ux');

Ext.ux.SubmitButton = Ext.extend(Ext.Button, {
formBind: true,
parentType: 'form',

initComponent: function(){
Ext.ux.SubmitButton.superclass.initComponent.call(this);
this.handler = this.submit;
},

submit: function() {
var form = this.getForm();
if (form != null) {
if (this.url == null) {
form.body.dom.action = form.url;
} else {
form.body.dom.action = this.url;
}
form.getForm().submit({
waitMsg : WAIT_TEXT,
waitTitle : WAIT_TITLE,
timeout: 7000,
success: function(form, action) { //if success
if(action.result.updateZone && action.result.updateUrl) {
updateIdeaZone(action.result.updateZone, action.result.updateUrl);
}
if(action.result.func){
eval(action.result.func);
}
win.hide();
},
failure: function(form,action){
handleExtResponse(form, action);
}
});

}
},

getForm: function() {
if (this.idForm != null)
return Ext.getCmp(this.idForm);

return this.findParentByType(this.parentType);
}
});

Ext.reg('kzsubmitbutton', Ext.ux.SubmitButton);

// the close button
Ext.ux.CloseButton = Ext.extend(Ext.Button, {
text : 'Sluiten',

initComponent: function(){
Ext.ux.SubmitButton.superclass.initComponent.call(this);
this.handler = this.hide;
},

hide : function(){
if(win) {
win.hide();
}
}
});

Ext.reg('kzclosebutton', Ext.ux.CloseButton);

Ext.ux.DownloadButton = Ext.extend(Ext.Button, {
text : 'Verstuur',
formBind: true,
parentType: 'form',

initComponent: function(){
Ext.ux.SubmitButton.superclass.initComponent.call(this);
this.handler = this.download;
},

download : function(){
var form = this.getForm();
if (form != null) {
if (this.url == null) {
form.body.dom.action = form.url;
} else {
form.body.dom.action = this.url;
}
form.getForm().submit({
method: 'POST',
// waitMsg : WAIT_TEXT,
// waitTitle : WAIT_TITLE,
//url: this.getForm().url,
params : form.getForm().getValues(),
success:function() {
Ext.Msg.alert('TEST',"This alert will never be called");
}

})
}
},

getForm: function() {
if (this.idForm != null)
return Ext.getCmp(this.idForm);

return this.findParentByType(this.parentType);
}
});

Ext.reg('kzdownloadbutton', Ext.ux.DownloadButton);


function handleExtResponse(form, action)
{
if (action.failureType === Ext.form.Action.CONNECT_FAILURE) {
Ext.Msg.alert(ERROR_TITLE,
'verbindingsfout, ververs a.u.b. de pagina.<br>' +
'als het zich blijft voordoen, neem contact op met de beheerder' +
'foutmelding:'+ action.response.status+': '+ action.response.statusText);
} else {
// this is a status 500 header we set in the actionhelper::ajaxResponse
var result = Ext.decode(action.response.responseText);
if(result && result.error) {
//jsonResp = Ext.util.JSON.decode(action.response.responseText);
// if there is error content
if (result.error) {
Ext.each(result.error, function(error) {
//update all error divs accorind to the message
//Element.update('error-' + error.field, error.msg);
form.findField(error.field).markInvalid(
error.msg
);
});
}
}
}
}

/* show window and wrap it around the url supplied
*/
function showWindow( formUrl, windowTitle)
{
//Ext.ux.SubmitButton.setUpdater(updateZone, updateUrl);
win.setTitle(windowTitle);
win.addFromXHR(formUrl,
{
_cid : Ext.get('idea_customer_id').getValue()
//_dc: new Date().getTime() // returns the number of MS since the epoch
}
);
win.on('add', function() {
win.show();
})
//win.focus();
}


and the Json:


{ "autoScroll" : true,
"bodyStyle" : { "padding" : "10px" },
"buttons" : [ { "cls" : "sf_validate_button",
"id" : "btnValid",
"text" : "verstuur",
"xtype" : "kzsubmitbutton"
},
{ "cls" : "sf_validate_button",
"id" : "btnClose",
"text" : "sluiten",
"xtype" : "kzclosebutton"
}
],
"items" : [ { "name" : "idea_discussion[thread_id]",
"value" : "4ba8d13569797",
"xtype" : "hidden"
},
{ "name" : "idea_discussion[date_posted]",
"value" : "2010-03-23 15:33:25",
"xtype" : "hidden"
},
{ "name" : "idea_discussion[state]",
"value" : "E",
"xtype" : "hidden"
},
{ "allowBlank" : false,
"name" : "idea_discussion[idea_id]",
"value" : 100069,
"xtype" : "hidden"
},
{ "allowBlank" : false,
"name" : "idea_discussion[discussion_type_id]",
"validationEvent" : false,
"value" : 1,
"xtype" : "hidden"
},
{ "autoWidth" : true,
"fieldLabel" : "Instruction",
"hideLabel" : true,
"invalidText" : "",
"name" : "idea_discussion[instruction]",
"text" : "Met een korte titel en een omschrijving kun je reacties geven op het idee. Zorg voor concrete, positieve, kritische reacties. Later kun je je teksten terugvinden in de tab reacties van het idee.",
"xtype" : "label"
},
{ "allowBlank" : false,
"autoCreate" : { "autocomplete" : "on",
"size" : 20,
"tag" : "input",
"type" : "text"
},
"blankText" : "titel mag niet leeg zijn",
"fieldLabel" : "titel",
"invalidText" : "",
"maxLength" : 50,
"maxLengthText" : "titel mag niet groter dan 50 karakters",
"name" : "idea_discussion[title]",
"xtype" : "textfield"
},
{ "allowBlank" : false,
"autoCreate" : { "cols" : 30,
"rows" : 4,
"tag" : "textarea"
},
"autoWidth" : true,
"blankText" : "omschrijving mag niet leeg zijn",
"fieldLabel" : "omschrijving",
"invalidText" : "",
"name" : "idea_discussion[article_text]",
"rows" : 4,
"xtype" : "textarea"
}
],
"method" : "POST",
"monitorValid" : true,
"url" : "/live.php/discussiecreate/360",
"xtype" : "form"
}

E_lexy
24 Mar 2010, 8:44 AM
What I am trying to achieve (and working fine in IE 7+, FF3+) is reusing a window and dynamically changing the the content (formpanel) by a server generated script.
The error I get in IE6 when the second content is being loaded into the window object is "parent node empty or is not an object".
Before I add new content by eval-ling a JSON stream with xtype configs, I call removeAll() on the parent window object.

As a bonus IE6 is also giving me an extra bbar after every click (more recent browsers don't).

I have tested previous Extjs versions and Extjs 3.0.0 didn't have this behaviour, 3.1+ does (both problems).

Demo url: http://pumiwex.es/extTest/dynamicWindow.html
the testcase is simplified by using txt files as dummy generated form configs. In actuality these are generated by Symfony + AtolExtjsplugin (http://www.symfony-project.org/plugins/atolExt3WidgetPlugin).

Using Extjs 3.1.1 in this testcase.

I am assuming I am missing something, while keeping the remote possibility of a bug open.

[edit] aded BUG to title to see if that would render a response.

Jamie Avins
30 Mar 2010, 8:09 AM
I combined these and I'm taking a look at it.

evant
30 Mar 2010, 8:42 AM
I believe this issue is resolved in the 3.2 RC1 build. Can you confirm?

Jamie Avins
30 Mar 2010, 9:52 AM
I see this issue in 3.1.2, but it is resolved in 3.2+.

E_lexy
30 Mar 2010, 1:24 PM
I tested in the 3.2 beta download and there the error is still there "parent node is empty". Happens every second 'reopening'
Also on the initial the first form opens without the textarea displayed.

reopening the window (with link2) gives me only a the bbar.

updated http://www.pumiwex.es/extTest/dynamicWindow.html with 3.2 beta

also the extra buttons in the bbar appear after a few open/close-s.

sorry no svn access, have a license though...

evant
30 Mar 2010, 4:25 PM
Fairly sure this is already fixed, wait til 3.2 final comes out and try it then.

E_lexy
30 Mar 2010, 11:17 PM
okidoki

evant
5 Apr 2010, 6:48 PM
3.2 is out, can you confirm that the issue is resolved?

E_lexy
5 Apr 2010, 11:50 PM
Yes, i updated the test url and it works with 3.2 and IE6 on XP.

I also haven't seen the extra bbar anymore, this release should have fixed that too?

Thanks!

evant
6 Apr 2010, 12:01 AM
Guess so.

Marking this one as closed.

stephen.friedrich
7 Apr 2010, 12:59 PM
Thanks a lot!
Works fine for me now, too.