Sencha extjs在新的浏览器选项卡中打开小部件

时间:2015-05-15 09:22:25

标签: extjs browser tabs widget

我是Sencha extjs的新手,我有一个问题。

我的小部件(HeaderRAM.js)有一个splitbutton和一个menuitemclick监听器,每个项目,我的 app.js 有menuitemclick监听器切换案例。 实际上小部件' Gestione RDA'在同一浏览器选项卡中打开。我想在新的浏览器标签中打开它。

你能帮我在新的浏览器标签中输入 Ext.getCmp(' gestioneRAM')。show()吗?

提前致谢。

以下是代码:

//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();
            }
        }
    });

1 个答案:

答案 0 :(得分:1)

ExtJS特别适合编写不需要其他浏览器选项卡/窗口的页面应用程序。此外,典型的Ext应用程序不会假设存在任何HTML标记,但会创建一个。因此,您很少需要转到DOM,如果在特殊情况下确实需要它,则不要使用getElementById之类的低级调用。