在tabpanel中显示窗口

Question

我正在处理extjs4，我的情况是： Extjs mvc用于构建我的应用程序，视口是我的应用程序的最高容器，西部地区是一棵树，中心区域是一个tabpage容器，单击树项目，将创建一个具有特定内容的新页面。然后在这个页面中，我弹出一个模型窗口，这个模型窗口只是掩盖页面，而不是整个视口，这样我仍然可以单击树项目打开另一个新页面。 我已经实现了这一点，但有一个问题，如果我已经打开一个选项卡中的模型窗口，并切换到另一个选项卡，然后返回，模型窗口隐藏，但我仍然希望该窗口显示如果我还没有关闭它。任何人都可以帮助我，有没有更好的方式，除了在tabpage中使用ifram？

app.js：

Ext.application({ 
    name: 'SysOpv', 
    appFolder: '/Js/AppSysOpv/app', 
    autoCreateViewport: true, 
    controllers: [ 
     'Category', 
     'Band' 
    ] 
}); 

视口：

Ext.define('SysOpv.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
    layout: 'fit', 

    initComponent: function() { 
     this.items = { 
      dockedItems: [{ 
       dock: 'top', 
       xtype: 'toolbar', 
       height: 80, 
       items: [ 
        { xtype: 'component', html: 'setup' } 
       ] 
      }], 
      layout: { 
       type: 'hbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       width: 250, 
       xtype: 'categorytree' 
      }, { 
       id: 'maintabpanel', 
       flex: 1,     
       xtype: 'tabpanel' 
      }]   
     }; 

     this.callParent(arguments); 
    } 
}); 

树视图：

Ext.define('SysOpv.view.category.Tree', { 
    extend: 'Ext.tree.Panel', 
    alias: 'widget.categorytree', 
    title: 'setup', 
    rootVisible: false, 
    useArrows: true, 
    hideHeaders: true,  
    columns: [{ 
     flex: 1, 
     xtype: 'treecolumn', 
     text: 'Name', 
     dataIndex: 'name' 
    }], 
    store: 'Category', 

    initComponent: function() { 
     this.callParent(arguments); 
    } 
}); 

窗口视图：

Ext.define('SysOpv.view.edit.Band', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.editband', 
    title: 'Setup', 
    layout: 'fit', 
    constrain: true, 
    modal: true, 

    initComponent: function() { 
     this.items = [{ 
      xtype: 'form', 
      bodyPadding: 10, 
      items: [{ 
       xtype: 'textfield', 
       name: 'name', 
       fieldLabel: 'Name' 
      }] 
     }]; 

     this.buttons = [{ 
      text: 'Save', 
      action: 'save' 
     }, { 
      text: 'Cancel', 
      scope: this, 
      handler: this.close 
     }]; 

     this.callParent(arguments); 
    } 
}); 

树控制器：

Ext.define('SysOpv.controller.Category', { 
    extend: 'Ext.app.Controller', 
    models: [ 'Category' ], 
    stores: [ 'Category' ], 
    views: [ 'category.Tree' ], 

    init: function() { 
     this.control({ 
      'categorytree': { 
       itemdblclick: this.onTreeItemdblclick 
      } 
     }); 
    }, 

    onTreeItemdblclick: function (tree, record, item, index, e, eOpts) { 
     var mainTabs = Ext.getCmp('maintabpanel'); 
     var tabId = record.get('id'); 

     if (mainTabs) { 
      var checkTab = mainTabs.getComponent(tabId); 
      if (checkTab) { 
       mainTabs.setActiveTab(checkTab); 
      } else { 
       var controller; 
       var list; 

       switch (tabId) { 
        case '0101': 
         list = Ext.widget('listband'); 
         break; 
       }     

       if (list) 
       { 
        var tabPage = mainTabs.add({ 
         id: record.get('id'), 
         title: record.get('name'), 
         closable: true, 
         layout: 'fit', 
         items: [ list ] 
        }); 

        mainTabs.setActiveTab(tabPage); 
       }    
      } 
     }   
    } 
}); 

模块控制器：

Ext.define('SysOpv.controller.Band', { 
    extend: 'Ext.app.Controller', 
    models: [ 'Band' ], 
    stores: [ 'Band' ], 
    views: [ 'list.Band', 'edit.Band' ], 

    init: function() { 
     this.control({ 
      'listband button[action=edit]': { 
       click: this.onEdit 
      } 
     }); 
    }, 

    onEdit: function(button, e, eOpts) { 

     var edit = Ext.widget('editband'); 
     var list = button.up('gridpanel'); 

     if (list.getSelectionModel().hasSelection()) { 
      var record = list.getSelectionModel().getLastSelected(); 
      // I use renderTo here but have no effect, 
      // so I search in the google find a way to show the window in tab, 
      // and not mask all the viewport. 
      button.up('#0101').add(edit); 
      edit.down('form').loadRecord(record); 
      edit.show(); 
     } else { 
      console.log('Not selected'); 
     } 
    } 
}); 

Answer 1

下面是例如溶液：

Ext.create('Ext.TabPanel', { 
    renderTo: 'container', 
    items: [ 
     { 
      title: 'Tab 1', 
      itemId: 'tab1', 
      items: [ 
       { xtype: 'button', text: 'Show window', handler: function(){ 
        var tab = this.up('#tab1'); // Find tab 
        var win = Ext.widget('editband'); // Find window 
        this.up('tabpanel').showWindow(tab, win); 
       } } 
      ] 
     }, 
    ], 
    showWindow: function(tab, w){ 
     tab.add(w); 
     tab.popup = w; 
     w.on('close', function() { // clean up after window close 
      delete this.popup; 
     }, tab, { single: true }); 
     w.show(); 
    }, 
    listeners: { 
     tabchange: function(panel, tab) { 
      if (tab.popup !== undefined) { // show window after tab change 
       tab.popup.show(); 
      } 
     } 
    } 
}); 

为tabchange事件中，我重新显示窗口基本上我已经创建的事件处理程序。 工作样品：http://jsfiddle.net/aCxYU/1/