PDA

View Full Version : window.open() from toolbar button opens window, from list item a new tab??



ManuelDziuba
15 Apr 2011, 5:21 AM
Hello to all,

I have to open a new window (Safari Tab) from Javascript (Handler).
I have a item from a list-component with a handler and a toolbar button with the same handler:


handler: function() {
window.open(MY_URL);
}

When I click on the list item, the browser generates a new tab (I use Chrome for testing). But when I click on the toolbar button, not a new tab is generated but a new window openes without toolbar, menubar, statusbar and so on...). Isn't it crazy?

Then I researched the forum. Some people also had the problem, that they need to open a new tab with Javascript... Then I added a hidden link to my html:


<a href="" target="_blank" id="hidden_link" style="display:none;"></a>

and changed my handler (of both the list item and the toolbar button) to:


handler: function() {
var link = Ext.getDom('hidden_link');
link.href = 'http://www.sencha.com'/; // only in this example ;)
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
}

... but also: List Item works fine, the toolbar button ALSO CREATES A NEW WINDOW ???
WHAT'S THAT?? From where this behavior comes??

[ on my iPhone the toolbar button doesn't works, the list item does!]

Thanks for any ideas!
Manuel

gordonjl
22 Aug 2011, 9:37 AM
The window.open issue is a real problem for smart phones. For the record: window.open() fails on an iPhone because of Safari's popup blocker functionality. It works if you disable it in Safari's settings on the iPhone. It's highly doubtful that folks will have popup blocking disabled.

I took your above code to fix my problem, thanks for it. I don't have a secondary window opening up, but that may be because I only have one element in my page accessing the hidden link. Sorry that I can't help you with that.

For posterity, here's the fix:

First, put a hidden link tag in your index.html page:



<body>....
<!-- Goofy hack to get around pop-up blocking in smart phones. -->
<a href="" target="_blank" id="hidden_link" style="display:none;"></a>
....


I created a function in app.js like so:




openLinkInNewWindow: function(url){

//awful hack to avoid pop-up blocking by smart phone browser.

var link = Ext.getDom('hidden_link'),
clickevent = document.createEvent('Event');

link.href = url;

clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
}


then call it from my various panels like so:





....
defaults:{xtype:'button',ui:'plain',iconAlign:'left',style:'color:white'},
items:[
{
text:'View Website',
icon:'public/resources/images/web_ico.jpg',
handler: function() {
MyApp.openLinkInNewWindow(this.record.get('website'));
},
scope:this


},....

slmd
22 Nov 2011, 8:02 AM
Thx for this code, it works perfect ;)

epiphanydigital
10 Apr 2012, 11:37 AM
Ext.util.openLink = function(href) {
var link = document.createElement('a');
link.setAttribute('href', href);
link.setAttribute('target','_blank');
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
return false;
}

Add this somewhere in your app code, then call it like...

Ext.util.openLink('http://www.google.com');

Uptaker
27 May 2012, 3:34 PM
[QUOTE=epiphanydigital;776479]
Ext.util.openLink = function(href) {
var link = document.createElement('a');
link.setAttribute('href', href);
link.setAttribute('target','_blank');
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
return false;
}

This helped me A LOT. I can now open a new window in my Smartphone. THANK YOU!

Rhoover
21 Jan 2013, 10:35 AM
Ext.util.openLink = function(href) {
var link = document.createElement('a');
link.setAttribute('href', href);
link.setAttribute('target','_blank');
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
return false;
}

Add this somewhere in your app code, then call it like...

Ext.util.openLink('http://www.google.com');

Thank you very much, works like a charm!!! even with a slight tweak to work inside your control.js:


Ext.define('MyApp.controller.MainControl', {
extend: 'Ext.app.Controller',

config: {

refs: {
news: 'newsview'
},

control: {
'newsview #twitteroutbutton': {
tap: 'exitToTwitter'
}
}
},

exitToTwitter: function() {
twitterLink = function(href) {
var link = document.createElement('a');
link.setAttribute('href', href);
link.setAttribute('target','_blank');
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
return false;
},
twitterLink('http://twitter.com/yourname');
}


});

tnickl
22 Jan 2013, 3:28 AM
Does NOT work on Android with ST2.0.1 . The URL is always opened INSIDE the app, replacing it's main window, meaning: you can't use the app anymore.

alambel
4 Feb 2013, 6:49 PM
Does NOT work on Android with ST2.0.1 . The URL is always opened INSIDE the app, replacing it's main window, meaning: you can't use the app anymore.

I confirm it doesn't work with ST2.0.1 with native sencha wrapper.
Any luck finding the solution tnickl?

tnickl
6 Feb 2013, 1:06 AM
alambel: Nope. If you want you can open a bug in the ST2 Bug forums, but I will refrain from that because my other bug report(s) are still unanswered/unsolved, so really have better things to do. We are firmly moving to JQM (a jquery framefork for mobiles), so I hope this whole fiddle-farting around with apple and sencha and windows and mac will eventually go away anyways.