tabpanelでウィンドウを表示

Question

私はextjs4で作業しています。私のケースは： Extjs mvcはアプリケーションをビルドするために使用され、ビューポートはアプリケーションのトップコンテナ、西の領域はツリー、中央の領域はタブページのコンテナです。ツリー項目をクリックすると、特定の内容の新しいページが作成されます。このページでは、モデルウィンドウをポップアップします。このモデルウィンドウは、ビューポート全体ではなくページをマスクするだけで、ツリー項目をクリックして別の新しいページを開くことができます。 私はこれを達成しましたが、すでにモデルウィンドウをタブで開いていて、別のタブに切り替えて戻ってモデルウィンドウを隠していても、そのウィンドウを表示したい場合は問題があります私はそれを閉じていない。誰か助けてもらえますか、iframeをタブページで使う以外は良い方法がありますか？

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/