在标签面板中显示窗口

Question

我正在研究 extjs4，我的情况是： extjs mvc 用于构建我的应用程序，viewport 是我的应用程序最顶层的容器，west 区域是一棵树，center 区域是一个 tabpage 容器，当点击树项时，将创建一个具有特定内容的新页面。然后在这个页面中，我弹出一个模型窗口，这个模型窗口只是屏蔽页面，而不是整个视口，这样我仍然可以单击树项打开另一个新页面。 我已经做到了，但是有一个问题，如果我已经在一个选项卡中打开了一个模型窗口，然后我切换到另一个选项卡然后返回，模型窗口是隐藏的，但是我仍然希望该窗口显示我还没有关闭它。谁能帮帮我，除了在标签页中使用 iram 之外还有更好的方法吗？

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/