показать окно на вкладке

Question

Я работаю над extjs4, мой случай таков: Extjs mvc используется для создания моего приложения, viewport - это контейнер toppest моего приложения, западный регион - это дерево, центральный регион - это контейнер вкладок, когда щелкните элемент дерева,будет создана новая страница с определенным содержанием.затем на этой странице я выскакиваю окно модели, это окно модели просто маскирует страницу, а не весь видовой экран, так что я все еще могу щелкнуть элемент дерева, чтобы открыть другую новую страницу.Я достиг этого, но есть проблема, если я уже открыл окно модели на вкладке и переключаюсь на другую вкладку, затем возвращаюсь назад, окно модели скрыто, но я все еще хочу, чтобы это окно отображалось, если яне закрыли это.Кто-нибудь может мне помочь, есть ли лучший способ, кроме использования 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/