[CLOSED][3.??] 'parentNode is null or not an object' when closing dialog window

[rickg]

Hi

In IE6/7/8 I'm double clicking on a grid row (only seems to happen on a double click), which in turn loads a new dialog window, the window then closes via a close button. This all worked fine until upgrading to extjs3.1. Now I get the following javascript error immediately after closing the window! : 'ParentNode is null or not an object'.

I've browsed the internet and forum but can't find any usful info, apart from that it's an internet explorer issue (works ok in firefox). I'm presuming 3.1 is now calling the same event twice which causes the javascript error.

Since this worked in 3.0, has anybody any ideas on a workaround/fix??? I've included the relevant snippets of the code below:


cheers

Rick


//private method to handle Search grid double-click
function gridJobOrder_CellDblClick(objGrd, rowidx, colidx, e) {
var stor = objGrd.getStore();
var jobOrderID = -1;

//get iorgid
if (stor != null) {
jobOrderID = parseInt(stor.getAt(rowidx).data.JobOrderID);
}

if (jobOrderID > 0) {
var maintenanceRequestID = parseInt(stor.getAt(rowidx).data.MaintenanceRequestID);
LoadJobOrder(jobOrderID, maintenanceRequestID);
}
else {
//Error
alert('Invalid JobOrderID (id=' + jobOrderID + ') returned at cell index!');
}
};

function LoadJobOrder(jobOrderID, maintenanceRequestID) {
var objJobOrderDialog = new CHIMS.Maintenance.CJobOrderDialog();
var jobOrderWindow = objJobOrderDialog.GetInstance(jobOrderID, maintenanceRequestID);

jobOrderWindow.show();
}

function ClosePanelPrompt(objPanel, maintenanceForm, maintenanceRequestID) {

//Check to see if form has changed
if (maintenanceForm.getForm().isDirty()) {
Ext.Msg.show({
title: 'Unsaved Changes!',
msg: 'The maintenance request details have changed. <br/><br/>Do you want to save the changes?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.WARNING,
fn: function(btn, text) {
if (btn == 'yes') {
_closeOnSave = true;
//save before continuing

saveMaintenance(maintenanceForm, maintenanceRequestID);
}
else if (btn == 'no') {
var extTabPanel = objPanel.findParentByType(Ext.TabPanel);
extTabPanel.remove(objPanel, true);
}
else {
//do nothing
}
}
});
}
else {
return true;
}

//always return false at the end otherwise Panel will always close
//when the prompt is displayed
return false;

};

[Condor]

Please post a runnable example.

[Matthias_WB]

I have the same problems...

I use one window with Form in center-mode and a tree on east. When I close the From, i get the same error.

[Matthias_WB]

In my example, in form is a button with "fieldLabel"-property... When I delete the property, all working fine in FF and IE6/7/8...



var Form = new Ext.FormPanel({
url:'xxxxxxxxx',
region:'center',
width: 480, bodyStyle:'padding:5px 5px 0',
defaults: {width: 300, msgTarget:'side'},
labelWidth:105,
defaultType: 'textfield',
items: [
...
new Ext.Button({
fieldLabel:' ',
labelSeparator :'',
text:'Die vorhandene Datei löschen!',
hidden:false,
iconCls :'icon-cancel',
handler: function() { doDel(); }
})

...
]


this lines do make problems in IE 6/7/8 and working fine in FF, GC ....


Then I change it to:



var Form = new Ext.FormPanel({
url:'xxxxxxxxx',
region:'center',
width: 480, bodyStyle:'padding:5px 5px 0',
defaults: {width: 300, msgTarget:'side'},
labelWidth:105,
defaultType: 'textfield',
items: [
...
new Ext.Button({
text:'Die vorhandene Datei löschen!',
hidden:false,
iconCls :'icon-cancel',
handler: function() { doDel(); }
})

...
]


and all working fine in IE, FF and GC...



Why is it so?

[evant]

As suggested, please post a full test case, otherwise we're left to guess.

[RyanElfman]

I'm having the same problem. I'm recreating a window not using .hide() but I'm extending the Window class and I .close() and .show(). The reason I do this is because I need clear the data thats in the FormPanel... I was having problems using .getForm().reset() so I decided to just recreate the object every time (I know pretty dirty).

I'm narrowed my problem down to the "fieldset" that is in a FormPanel inside my Window. This is only erroring in IE not any other browser.

Here's the error:

Message: 'parentNode' is null or not an object
Line: 3668
Char: 10
Code: 0

Here is the code:


CreateRegionalContactWindow = Ext.extend(Ext.Window,
{
initComponent: function()
{
var selfReference = this;

this.companiesComboBox = new Ext.form.ComboBox(
{
id: "companiesComboBox",
hiddenName: "compid",
mode: "local",
store: companiesStore,
displayField: "compname",
valueField: "compid",
fieldLabel: "Company",
emptyText: "Select a Company",
allowBlank: false,
width: 300,
loadMask: true,
selectOnFocus: true,
lazyInit: false,
editable: false,
triggerAction: 'all'
});

this.myForm = new Ext.FormPanel(
{
frame: true,
id: "regionalContactFormPanel",
layout: "form",
autoHeight: true,
defaultType: "textfield",
border: false,
items:
[
{
xtype: "hidden",
id: "contacttypecount"
},
{
xtype: "hidden",
id: "statescount"
},
{
xtype: "hidden",
id: "regionalcontactid"
},
this.companiesComboBox,
{
id: "companynameoverride",
fieldLabel: "Company Override",
width: 300,
maxLength: 250
},
{
id: "lastname",
fieldLabel: "Last Name",
width: 150,
maxLength: 50,
allowBlank: false
},
{
id: "firstname",
fieldLabel: "First Name",
width: 150,
maxLength: 50
},
{
id: "jobtitle",
fieldLabel: "Position",
width: 250,
maxLength: 50
},
{
id: "phonenumber",
fieldLabel: "Phone Number",
width: 150,
maxLength: 50
},
{
id: "cellphonenumber",
fieldLabel: "Cell Phone",
width: 150,
maxLength: 50
},
{
id: "faxnumber",
fieldLabel: "Fax Number",
width: 150,
maxLength: 50
},
{
id: "email",
fieldLabel: "Email",
width: 250,
maxLength: 250,
vtype: "email"
},
{
xtype: "fieldset",
id: "contacttypes",
fieldLabel: "Contact Type",
autoScroll: true,
layout: "column"
},
{
xtype: "fieldset",
id: "states",
fieldLabel: "States",
autoScroll: true,
height: 150,
autoWidth: true,
layout: "column"
}
]
});

Ext.applyIf(this,
{
id: "createRegionalContactWindow",
width: 600,
modal: true,
resizable: false,
title: "Add New Regional Contact",
items: [this.myForm],
buttons: [
{
text: "Create New Contact",
scope: this,
handler: function ()
{
var thisFormPanel = this.getComponent("regionalContactFormPanel");

if (!thisFormPanel.getForm().isValid()) { return false; }

thisFormPanel.getForm().submit(
{
url: "AjaxPages/CreateRegionalContact.asp",
method: "POST",
waitMsg: "Adding Regional Contact...",
success: function (form, action)
{
if (action.result.success)
{
Ext.Msg.alert("Add Regional Contact", "Your regional contact has been added.");

// Reset the companies combo box
if (regionalContactsGridPanel.getSelectionModel().hasSelection())
{
var lastOpt = regionalContactsStore.lastOptions;
var regionalContactID = regionalContactsGridPanel.getSelectionModel().getSelected().get("regionalcontactid");
Ext.apply(lastOpt.params, { regionalContactID: regionalContactID });

regionalContactsStore.reload(lastOpt);
}
else
{
regionalContactsStore.reload();
}

regionalContactCompaniesStore.reload();
selfReference.close();
}
else Ext.MessageBox.alert("Error Occurred", action.result.errors.reason);
},
failure: function (form, action)
{
var strError = "";
try
{
strError = action.result.errors.reason;
}
catch (e)
{
strError = "Unable to access website.";
}
Ext.Msg.alert("Error Occurred", strError);
}
});
}
},
{
text: "Cancel",
handler: function ()
{
this.close();
},
scope: this
}]
});

caddetails.CreateRegionalContactWindow.superclass.initComponent.apply(this, arguments);
}
});

[evant]

Sounds like your problem is unrelated.

As it says in the docs, calling close explicitly:



Closes the Window, removes it from the DOM, destroys the Window object and all its descendant Components.


So next time you try to show it it will fail.

I'm going to mark this thread as closed since no extra info has been provided.