PDA

View Full Version : Modal popup window when click a link



yugikhoi
7 Jun 2010, 8:35 AM
Hi all,

I am totally new to Extjs. I design a web page and I want when i click a link in <a href="link URL">Link</a>. This click will link to that URL in modal popup windows instead of redirect to another page. I am looking a lot on this forum however cannot find the solution.

Actually, Jquery Thickbox can do that perfectly but i think Extjs is powerful enough that i do not need to add another library in my page which is too large bandwidth. If anyone can give out solution, i am very appreciated for that.

Thanks so much,

gevik
7 Jun 2010, 10:52 AM
Study the following code. It should be enough to get you started.


<script>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.1/resources/images/default/s.gif';
App.Demo.init();
});


Ext.ns('App');
App.Demo = {
init:function()
{
/* just for demo */
},

openWindow:function(url)
{
var win = new Ext.Window({
width:640,
height:480,
title:'Site:' + url,
autoScroll:true,
modal:true
});

var iframeid = win.getId() + '_iframe';

var iframe = {
id:iframeid,
tag:'iframe',
src:url,
width:'100%',
height:'100%',
frameborder:0
}

// show first
win.show();
// then iframe
Ext.DomHelper.insertFirst(win.body, iframe)

}

}
</script>
<a href="#" onclick="App.Demo.openWindow('http://www.google.com')"/>Demo Link<a/>

Animal
7 Jun 2010, 12:08 PM
But don't use inline event handlers.

Many solutions. Either use DomQuery and a Composite element encapsulating all your <a> elements to add a listener (with stopEvent: true)

Or use event delegation to add ONE single listener to an outer element.

yugikhoi
7 Jun 2010, 8:50 PM
@gevik: Thanks so much, your solution is working probably. I will modify to make it a little bit better however you help me saving a lot of time looking around. Again thanks for your help.

koushikroy1989
6 Mar 2015, 5:53 AM
Study the following code. It should be enough to get you started.


<script>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.1/resources/images/default/s.gif';
App.Demo.init();
});


Ext.ns('App');
App.Demo = {
init:function()
{
/* just for demo */
},

openWindow:function(url)
{
var win = new Ext.Window({
width:640,
height:480,
title:'Site:' + url,
autoScroll:true,
modal:true
});

var iframeid = win.getId() + '_iframe';

var iframe = {
id:iframeid,
tag:'iframe',
src:url,
width:'100%',
height:'100%',
frameborder:0
}

// show first
win.show();
// then iframe
Ext.DomHelper.insertFirst(win.body, iframe)

}

}
</script>
<a href="#" onclick="App.Demo.openWindow('http://www.google.com')"/>Demo Link<a/>


Hi gevik,

Your code has solved one of my issue regarding opening a 3rd party payment gateway using ext js.
But, my doubt is why do we need to use the url in both the places?
- Once in the window.url property and again in the frame.src property.

My code looks like the following



var win = new Ext.Window({
autoLoad: {
url: 'https://demo.globalgatewaye4.firstdata.com/payment?someParameters=XYZ',
discardUrl: true,
nocache: true,
text: "Loading...",
timeout: 60,
scripts: false
},
width:'40%',
height:'70%'
});

var iframeid = win.getId() + '_iframe';


var iframe = {
id:iframeid,
tag:'iframe',
src:'https://demo.globalgatewaye4.firstdata.com/payment?someParameters=XYZ',
width:'100%',
height:'100%',
frameborder:0
}


// show first
win.show();
// then iframe
Ext.DomHelper.insertFirst(win.body, iframe)

koushikroy1989
6 Mar 2015, 6:02 AM
Study the following code. It should be enough to get you started.


<script>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.1/resources/images/default/s.gif';
App.Demo.init();
});


Ext.ns('App');
App.Demo = {
init:function()
{
/* just for demo */
},

openWindow:function(url)
{
var win = new Ext.Window({
width:640,
height:480,
title:'Site:' + url,
autoScroll:true,
modal:true
});

var iframeid = win.getId() + '_iframe';

var iframe = {
id:iframeid,
tag:'iframe',
src:url,
width:'100%',
height:'100%',
frameborder:0
}

// show first
win.show();
// then iframe
Ext.DomHelper.insertFirst(win.body, iframe)

}

}
</script>
<a href="#" onclick="App.Demo.openWindow('http://www.google.com')"/>Demo Link<a/>


Hi gevik,

Your code has solved one of my issue regarding opening a 3rd party payment gateway using ext js.

But, my doubt is why do we need to mention the 3rd party url in two places -
1. window.url
2. iframe.src

Following is my code snippet.


var win = new Ext.Window({
autoLoad: {
url: 'https://demo.globalgatewaye4.firstdata.com/payment?someParam=XYZ',
discardUrl: true,
nocache: true,
text: "Loading...",
timeout: 60,
scripts: false
},
width:'40%',
height:'70%'
});

var iframeid = win.getId() + '_iframe';


var iframe = {
id:iframeid,
tag:'iframe',
src:'https://demo.globalgatewaye4.firstdata.com/payment?someParam=XYZ',
width:'100%',
height:'100%',
frameborder:0
}


// show first
win.show();
// then iframe
Ext.DomHelper.insertFirst(win.body, iframe)