PDA

View Full Version : Closing a overlay



KPChow
25 Oct 2011, 7:34 AM
Hi guys,

I've got a panel which has a button that opens an overlay. How can I close the overlay if I use the HTML hyperlink tag inside the 'html' attribute?

Example below:



handler: function() {
if(!this.popup){
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>Wrong</p><a href="javascript:closePopUp();">asdsa</a>',
dockedItems:[{
dock: 'top',
xtype: 'toolbar',
title: 'Answer'
}]
});
}
this.popup.show('pop');
}

function closePopUp(){
alert('test');
}



My first thought was to create a function to close it but by saying 'this.popup,close('pop');' wouldn't work.

Thanks
K

MattUCG
25 Oct 2011, 11:56 AM
Could you set a unique value for the panel's id property, then use that in the closePopup function?

AndreaCammarata
25 Oct 2011, 2:14 PM
Hi guys,

I've got a panel which has a button that opens an overlay. How can I close the overlay if I use the HTML hyperlink tag inside the 'html' attribute?

Example below:



handler: function() {
if(!this.popup){
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>Wrong</p><a href="javascript:closePopUp();">asdsa</a>',
dockedItems:[{
dock: 'top',
xtype: 'toolbar',
title: 'Answer'
}]
});
}
this.popup.show('pop');
}

function closePopUp(){
alert('test');
}



My first thought was to create a function to close it but by saying 'this.popup,close('pop');' wouldn't work.

Thanks
K

Hi K.
You can simply do that, using event delegation.
I write you a full example that will show you how to do that.



Ext.setup({
onReady: function() {

//Definition pf the function to be called when the link is tapped
var onLinkTap = function(){

//Destroy the panel
pnl.destroy();

};

//Definitiion of the floating panel
var pnl = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>Wrong</p><a>asdsa</a>',
dockedItems:[
{
dock: 'top',
xtype: 'toolbar',
title: 'Answer'
}
],
listeners: {
body: {
tap: onLinkTap,
delegate: 'a'
}
}
});

//Showing the panel
pnl.show();
}
});


If you want to know more on event delegation, I suggest you to take a look at the following blog post written by Tommy Maintz.

http://www.sencha.com/blog/event-delegation-in-sencha-touch/

Hope this help.

KPChow
27 Oct 2011, 12:59 AM
Hi andrea,

Thank you for your help!

Also, I like to add a big thank you for your contribution to this forum - I noticed that a lot of things that I search for happens to fall back to you. This is something that not many people are acknowledging in my opinion.

Keep it up!

K

AndreaCammarata
27 Oct 2011, 9:33 AM
Hi andrea,

Thank you for your help!

Also, I like to add a big thank you for your contribution to this forum - I noticed that a lot of things that I search for happens to fall back to you. This is something that not many people are acknowledging in my opinion.

Keep it up!

K

You are welcome KPChow and thank you for your good words ;)
I'm glad to share my experience to help the community, so I try to do my best to help you guys, even if sometimes is really hard to find the time to do that.

KPChow
8 Dec 2011, 2:13 AM
Hi Andrea,

I've stumbled upon a issue. I created a nested list, where at the end of a panel there is a button which opens the overlay. Besides destroying the overlay panel when closing it, I also added 'onBackTap();' to take me back a panel. The issue is that once it does that, the interaction would only work on the second time you touch the screen, i.e. double click/tap. Actually this applies if you want to hide and show other panels.

Have you ever come across this problem before?

K

KPChow
8 Dec 2011, 3:22 AM
Ignore my post - found the issue.

It's to do with the destroy(), so I changed it to hide() and it works now.

K