PDA

View Full Version : Panel Listener's Close event is not captured..



Vishvesh
3 Apr 2013, 11:41 AM
Hello guys,
I am saving the state of all my panels / portlets in the db by constructing json and saving it.
It renders back perfectly on page load.
But until recently, I tried to capture the close event of the panel, so that I can delete the portlet from the database.

My code for the panel is :

function getPanel1() {
var panel1 = {
width: 400,
height: 300,
//xtype: 'panel',
id: 'newPanel',
title: 'Container Panel',
layout: 'fit',
//enableDragDrop: true,
callableFunction: function() {
alert("Yes");
},
closable: true,
/*listeners: {
afterrender: function (comp) {
var element = comp.getEl();
element.on('click', function() {
alert('ok')
});
}
},*/
/*handler: function(){
alert("yo");
this.ownerCt.close();
},*/
listeners: {
close: function(btn){
alert("comes here"+btn);
this.callableFunction();
}
},
/*listeners: {
render: function(c) {
c.body.on('click', function() {
alert('ok');
});
}
},*/
items: [
{
//xtype: 'panel',
title: 'Child Panel 1',
height: '25%',
width: '25%',
closable: true,
}
]
};
return panel1;
}

I have tried all sorts of combinations for the listeners which you can see it's in the /* */ block.
Everything works well when the panel is just constructed. The listener event fires and the this.callableFunction() is called.
The Json I am constructing looks like this :


{"userPortlets":[
{"currentUser":"someemail@host.com","tabNumber":0,"portalColumn":"col-0",
"portlet": {"width":400,"height":300,"id":"newPanel","title":"Container Panel","layout":"fit","closable":true,
"listeners":{}, //HERE IS THE PROBLEM
"items":[{"title":"Child Panel 1","height":"25%","width":"25%","closable":true}]}
}
]}

As we can see, it's not recognizing any variables / functions inside the listeners: {} call.
Everything else is saved and rendered back correctly.
But somehow I can't capture the close event on page reload.

My tabs are loaded like this : And I tried using the tabs.on(afterrender) call as well, but doesn't work :-(

tabs.on("afterrender", function() {
getSavedUserPortlets();

//HERE IS THE CHECK
if(typeof (Ext.getCmp('newPanel')) !== 'undefined')
{
Ext.getCmp('newPanel').on('close',function() {
alert("This alarm never gets called. :(");
});
}
else
{
console.log(typeof (Ext.getCmp('newPanel')));
}
});

slemmon
5 Apr 2013, 8:27 AM
If you just listen for a close event on a panel/tab in a simple test case is it capturing it?
Also, what framework version are you working with in your application?

Vishvesh
5 Apr 2013, 9:12 AM
Hello,
Thanks for your reply.
I am using Extjs 4.0.7

But I solved the problem using
Ext.getCmp(portalId).on('close',function() {.

Thanks :-)