Fenster zeigen in tabpanel

Dem ich arbeite, extjs4, mein Fall ist:
Extjs mvc wird genutzt, um meinen Antrag, viewport ist die toppest-container meiner Bewerbung, west region wird ein Baum, Zentrum region ist ein tabpage-container, wenn Sie auf das Baum-Element, wird eine neue Seite mit bestimmten Inhalten erstellt werden. dann auf dieser Seite, ich popup-Modell-Fenster, dieses Modell-Fenster-Maske die Seite, nicht das gesamte Ansichtsfenster, so dass ich immer noch auf die tree-Element zu öffnen-eine weitere neue Seite.
Ich habe das erreicht, aber es gibt ein problem, wenn ich bereits ein Modell öffnen Fenster in einem tab, und ich wechseln zu einer anderen Registerkarte, dann wieder zurück, das Modell-Fenster ausgeblendet, aber ich möchte dennoch, das Fenster zu zeigen, wenn ich noch nicht geschlossen. Kann mir jemand helfen, gibt es eine bessere Art und Weise, außer mit ifram in der tabpage?

app.js:

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

Viewport:

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

Baum-Ansicht:

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

Fenster Anzeigen:

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

Baum-Controller:

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

Modul Controller:

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');
        }
    }
});

InformationsquelleAutor Steven Hu | 2012-01-15

Schreibe einen Kommentar