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:

Code:

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:

Code:

<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:

Code:

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:

Code:

<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:

Code:

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:

Code:

....
 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

Code:

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]

Code:

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

Originally Posted by epiphanydigital

Code:

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:

PHP Code:


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

Originally Posted by tnickl

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.

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

Thread Tools

Search Thread

Display

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

A more elegant way of doing the same thing really...

Similar Threads

[OPEN] [CLOSED] Window that opens child Window - Field loses focus immediately

[OPEN-107][3.x/2.x] File upload response opens new window under FF w/security setting

window has a cache panel item,the panel can't show in open window again in IE6.

open Ext.Window from a toolbar button

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News