[solved] How to kill EventListener, when panel is closed

[Mark]

I have created a layout which contains 2 nested Panel :
layout
innerLayout
detailLayout To fit the second nested layout (detailLayout) to the parent I followed some suggestions in this forum and added manual to eventlisteners to my script:

* innerLayout.addListener('layout', function(){ detailLayout.layout(); });
* layout.addListener('onwindowresize',function(){detailLayout.layout();});

So far, everthing works fine! But when I close a panel, an error comes up in IE6.:s

I think it depense on the evenlistener, which I added to the "innerLayout" panel. After removing the panel, the subpanel (detailLayout) is not longer defined!
To solve this problem, I tried to catch the "beforeremove"-event to uninstall the listener before the panel is closed - but no success, yet.

I hope there is somebody with more Extperience than I have, who will point me the way!
Thanks in advance,
Mark

To reproduce the problem here is the code:



var myGrid = function() {
return {

init: function() {

Ext.QuickTips.init();

var ps= 50 ;
var northPanel;
var detail ;
var filterCol, filterValue,filterQuery;


// create the Data Store
var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({
url: 'proxygetdata.php'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'id'
}, [
{name: 'id',type:'int'},
{name: 'Name',mapping: 'Name'},
{name: 'HomePhone'},
{name: 'WorkPhone'},
{name: 'EmailAddress'},
{name: 'StreetAddress'},
{name: 'Zipcode'},
{name: 'City'}
])

// turn on remote sorting
, remoteSort: true
});
ds.setDefaultSort('id', 'asc');
ds.baseParams = {limit:ps};
// shorthand alias
var fm = Ext.form, Ed = Ext.grid.GridEditor;

// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'results',
header: "ID",
dataIndex: 'id',
width: 35

},{
header: "Name",
dataIndex: 'Name',
width: 100,
hidden: false,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "HomePhone",
dataIndex: 'HomePhone',
width: 100,
css: 'white-space:normal;',
editor: new Ed(new fm.TextField({
allowBlank: true
}))

},{
header: "WorkPhone",
dataIndex: 'WorkPhone',
width: 100,
css: 'white-space:normal;',
editor: new Ed(new fm.TextField({
allowBlank: true
}))

},{
header: "EmailAddress",
dataIndex: 'EmailAddress',
width: 150,
css: 'white-space:normal;',
editor: new Ed(new fm.TextField({
allowBlank: true
}))

},{
header: "StreetAddress",
dataIndex: 'StreetAddress',
width: 200,

css: 'white-space:normal;',
editor: new Ed(new fm.TextField({
allowBlank: true
}))

},{
header: "Zipcode",
dataIndex: 'Zipcode',
width: 80,

css: 'white-space:normal;',
editor: new Ed(new fm.TextField({
allowBlank: true
}))

},{
header: "City",
dataIndex: 'City',
width: 150,
css: 'white-space:normal;',
editor: new Ed(new fm.TextField({
allowBlank: true
}))

}]);
cm.defaultSortable = true;

// create the editor grid
var grid = new Ext.grid.EditorGrid('listView', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel(),
monitorWindowResize: true,
trackMouseOver: true,
enableColLock: false,
autoSizeHeaders : false,
autoSizeColumns : false,
maxRowsToMeasure:ps,
loadMask: true
});
// render it
grid.render();

var layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 220,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false
}
});
var innerLayout = new Ext.BorderLayout('content', {
east: {
split:true,
initialSize: 220,
titlebar: true,
collapsible: true,
animate: true,
minSize: 100,
maxSize: 400

},
center: {
fitToFrame:true,
autoScroll:false,
resizeTabs: true,
closeOnTab: true
}
});
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));

innerLayout.add('center', new Ext.GridPanel(grid, {title:"<center><img src='resources/images/liste.png' border=0 align='absmiddle'>&nbsp;Liste</center>"} ));
innerLayout.getRegion('center').showPanel('listView');

innerLayout.add('east',new Ext.ContentPanel('east',{title:'Kategorie',closable:false}));
var east = innerLayout.getRegion('east');
east.collapse();



grid.on('rowclick', function(grid, rowIndex, e) {

var id = ds.data.items[rowIndex].id;

var entry = innerLayout.getRegion('center').getPanel('detailView_'+id);

if(!entry){

Ext.DomHelper.append('content', {
tag: 'div',
id : "detailView_"+id
});
Ext.DomHelper.append("detailView_"+id, {
tag: 'div',
id : "detailHeader_"+id
});
Ext.DomHelper.append("detailView_"+id, {
tag: 'div',
id : "detailTabs_"+id
});


var detailLayout = new Ext.BorderLayout("detailView_"+id, {
north: {
onWindowResize:true,
fitToFrame:true,
split:false,
initialSize: 26,
titlebar: false
},

center: {
onWindowResize:true,
fitToFrame:true,
autoScroll:false,
split: true ,
loadMask:true ,
closeOnTab: true
}
});

innerLayout.add('center',detail=new Ext.ContentPanel("detailView_"+id,
{title:"<img src='resources/images/detail.png' border='0' align='absmiddle'>&nbsp;"+ ds.data.items[rowIndex].get('Name'),
onWindowResize:true,
fitToFrame:true,
autoscroll:true,
resizeTabs:true,
minTabWidth:80,
preferredTabWidth:120,
closable:true,
closeOnTab: true,
loadMask:true
}));
detailLayout.add('north', new Ext.ContentPanel("detailHeader_"+id ));
detailLayout.add('center', new Ext.ContentPanel("detailTabs_"+id,{onWindowResize:true,fitToFrame:true,autoScroll:true}));

innerLayout.addListener('layout', function(){ detailLayout.layout(); });
innerLayout.add('center',new Ext.NestedLayoutPanel(detailLayout) );

} else {
innerLayout.getRegion('center').showPanel('detailView_'+id);
}
})

layout.addListener('onwindowresize',function(){detailLayout.layout();});
layout.add('center',new Ext.NestedLayoutPanel(innerLayout) );
layout.endUpdate();

ds.load({params:{start:0, limit:ps}});

}
};

}();
Ext.onReady(myGrid.init, myGrid, true);
</script>
Using Ext. 1.1 beta2 with jQuery-adapter

[evant]

What error do you get? What line is it happening on?

[Mark]

Because I get no error in FF I can't give details to the error in iE. There is only a message that on row 13 is an error.
I post the link so hope you can reproduce it. (http://ext.auragard.de/index2.html)

[evant]

http://extjs.com/forum/showthread.php?t=8853&highlight=getBoundingClientRect

[Mark]

thanks, evant, posting the link!

I think that is exactly my problem:
the eventlistener is pointing to an element that no longer exists.
Thats why I ask after a opportunity to catch the moment before the panel is close to destroy the eventlistener before the update is called.
Any suggestions, how I could do this?

[Mark]

Okay, I solved it.:)

[evant]

Care to share your solution so everyone can see?

[Mark]

I changed:


innerLayout.addListener('layout', function(){ detailLayout.layout(); });to:

innerLayout.addListener('layout', function(){ if(Ext.get("detailView_"+id)){detailLayout.layout(); }});
For sure, not the best way, but it works for me!\:D/