Sencha extjs open widget in new browser tab

Question

I'm new to Sencha extjs and I have a question.

I have my widget(HeaderRAM.js) with one splitbutton and a menuitemclick listener for every item, and my app.js with menuitemclick listener switch case. Actually the widget 'Gestione RDA' is opened in the same browser tab. I'd like to open it in a new browser tab.

Could you help me to have Ext.getCmp('gestioneRAM').show() in a new browser tab?

Thanks in advance.

Here's the code:

//headerRAM.js
Ext.define('RAMUI.widget.HeaderRAM', {
extend: 'Ext.toolbar.Toolbar',
initComponent: function () {
    codiceUtente = this.codiceUtente;
    this.items = [
        {
            xtype: 'splitbutton',
            text : traduci('Main menu'  , document.getElementById('hddLingua').value),
            id:'mainMenu',
            menu: new Ext.menu.Menu({
                items: [
                    // these will render as dropdown menu items when the arrow is clicked:
                    { text : traduci('Gestione RAM'  , document.getElementById('hddLingua').value),id:'menuGestRAM', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RAM'  , document.getElementById('hddLingua').value)); }, value: 'GestioneRAM' },
                    { text : traduci('Evasione RDA Mat'  , document.getElementById('hddLingua').value), id: 'menuGestRDA', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RDA'  , document.getElementById('hddLingua').value)); }, value: 'GestioneRDA' },
                    { text : traduci('Evasione RDA Att'  , document.getElementById('hddLingua').value), id: 'menuGestRDAAtt', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RDA Att'  , document.getElementById('hddLingua').value)); }, value: 'GestioneRDAAtt' },
                    { text : traduci('Autorizzazione RDA'  , document.getElementById('hddLingua').value), id: 'menuGestRDADIAP', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RDA DIAP'  , document.getElementById('hddLingua').value)); }, value: 'GestioneRDADIAP' },
                    { text : traduci('Report RAM'  , document.getElementById('hddLingua').value), id: 'menuReportRAM', iconCls: 'RAM', handler: function () { messaggio( traduci('Report RAM'  , document.getElementById('hddLingua').value)); }, value: 'ReportRAM' },
                    { text : traduci('Gestione Utenti'  , document.getElementById('hddLingua').value), id: 'menuGestUtenti', iconCls: 'utenti', handler: function () { messaggio( traduci('Gestione utenti'  , document.getElementById('hddLingua').value)); }, value: 'GestioneUtenti' }
                ],
                listeners: {
                    scope: this,
                    'click': function (menu, item, e) {
                        //Lancio un evento dell'header
                        menu.up().up().fireEvent('menuclick', menu, item, e);
                    }
                }
            })
        },...

 //app.js 
 var intestazione = Ext.create('RAMUI.widget.HeaderRAM', {
        id: 'intestazione',
        codiceUtente: this.codiceUtente,
        listeners: {
            scope: this,
            'menuclick': function (menu, item, e) {
               switch (item.value) {
                   case 'GestioneRDA':
                        //Se non esiste genero la maschera di gestione delle ram                            
                        if (Ext.getCmp('gestioneRDA') == null) {
                            Ext.create('RAMUI.widget.GestioneRDA', {
                                id: 'gestioneRDA',
                                societaUtente: this.societaUtente,
                                codiceUtente: this.codiceUtente,
                                flex: 1
                            });
                        }
                        else {
                            //Ext.getCmp('gestioneRDA').reset();
                            Ext.getCmp('gestioneRDA').show();
                        }
                        //Aggiungo la mappa di gestione delle RAM
                        Ext.getCmp('mainViewport').items.add(Ext.getCmp('gestioneRDA'));
                        break;
                        ....
               }
//mainViewport
Ext.create('Ext.container.Viewport', {
        id: 'mainViewport',
        layout: {
            type: 'vbox',
            align: 'stretch',
            pack: 'start'
        },
        border: false,

        items: [
            intestazione,
            corpo
        ],
        listeners: {
            'resize': function () {
                this.doLayout();
            }
        }
    });

Answer 1

ExtJS is particularly good for writing on-page applications where you do not need another "browser tab/window". Also, typical Ext application does not assume that any HTML markup exists but it creates one. Therefore, you rarely need to go down to DOM and if you do need it in a special case, you do not use the low-level calls such as getElementById.