使用焦点切换在TabPanel中添加和删除选项卡

Question

如何在TabPanel中实现备用添加和删除选项卡，并在新选项卡和默认选项卡之间切换焦点？ 目前，我这样做：

//adding new tab and set active
    var tabs = Ext.getCmp('tabs');
    var albumTab = {
        id: 'albumTab',
        title: 'New album',
        items: [
        {
            xtype: 'panel',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                uploadForm,
                albumPhotos
            ]
        }
        ]
    };

    tabs.add(albumTab);
    var albumTabPanel = tabs.items.findBy(function (i) {
        return i.id === 'albumTab';
    });
    tabs.setActiveTab(albumTabPanel);
    tabs.down('#albumsTab').setDisabled(true);
    tabs.down('#photosTab').setDisabled(true);

//removing a new tab and switching on default tab
    var tabs = Ext.getCmp('tabs');
    var albumsTabPanel = tabs.items.findBy(function (i) {
        return i.id === 'albumsTab';
    });
    tabs.down('#albumsTab').setDisabled(false);
    tabs.down('#photosTab').setDisabled(false);
    tabs.setActiveTab(albumsTabPanel);
    tabs.remove('albumTab', true); 

当我第一次添加新标签时，它可以正常工作。但如果我在删除新标签后这样做，我会收到错误： 错误：el为null TypeError：el为null el.addCls.apply（el，arguments）; 在66799行ext-all-dev.js 设置活动选项卡时发生错误：

tabs.setActiveTab(albumTabPanel);

由于

Answer 1

完整代码：

Ext.application({
    name: '',
    launch: function() {
        var previews = Ext.create('Ext.Panel',{
            layout: 'column',
            height: 500
        });
        var albumPhotos = Ext.create('Ext.Panel', {
            layout: 'column',
            border: 0
        });
        var itemModelStore = Ext.create('ItemModelStore');
        itemModelStore.load(function() {
            itemModelStore.each(function(record){
                previews.add({
                    'id': record.get('id'),
                    'xtype': 'image',
                    'src': record.get('src'),
                    'style' : 'width:171px;height:196px;padding-left:5px;padding-top:5px;cursor:pointer;',
                    listeners: {
                        el: {
                            click: function() {
                                albumId = record.get('id');
                                fillAlbum(albumId);
                                var tabs = Ext.getCmp('tabs');
                                var albumTab = {
                                    id: 'albumTab',
                                    title: 'New album',
                                    items: [
                                    {
                                        xtype: 'panel',
                                        layout: {
                                            type: 'vbox',
                                            align: 'stretch'
                                        },
                                        items: [
                                            uploadForm,
                                            albumPhotos
                                        ]
                                    }
                                    ]
                                };

                                tabs.add(albumTab);
                                var albumTabPanel = tabs.items.findBy(function (i) {
                                    return i.id === 'albumTab';
                                });
                                tabs.setActiveTab(albumTabPanel);
                                tabs.down('#albumsTab').setDisabled(true);
                                tabs.down('#photosTab').setDisabled(true);
                            }
                        }
                    }
                });
            });
            previews.doLayout();
            albumPhotos.doLayout();
        });

        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    title: '',
                    items: [
                    {
                        xtype: 'tabpanel',
                        id: 'tabs'
                    }
                    ]
                }
            ]
        });
        var albumsTab = {
            title: 'Album',
            id: 'albumsTab',
            items: [
            {
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                {
                    html: '<b><a onclick="return newAlbumWindowShow()" href="">Create album</a></b>'
                    + '<br/><br/>'
                }, previews 
                ]
            }
            ]
        };
        var photosTab = {
            title: 'Photos',
            id: 'photosTab',
            html: 'blabla 2<br/><b><a onclick="newAlbumWindowShow()" href="#">Create album</a></b>'
        };
        displayStartPage = function() {
            var tabs = Ext.getCmp('tabs');
            tabs.add(albumsTab);
            tabs.add(photosTab);
        }();

        onStartPage = function() {
            var tabs = Ext.getCmp('tabs');
            var albumsTabPanel = tabs.items.findBy(function (i) {
                return i.id === 'albumsTab';
            });
            tabs.down('#albumsTab').setDisabled(false);
            tabs.down('#photosTab').setDisabled(false);
            tabs.setActiveTab(albumsTabPanel);
            tabs.remove('albumTab', true);
        }   
        var fillAlbum = function(albumId) {
            Ext.define('AlbumStore', {
                extend: 'Ext.data.Store',
                model: 'ItemModel',
                proxy: {
                    type: 'ajax',
                    url: 'php/readAlbum.php',
                    method: 'POST',
                    reader:{
                        type:'json',
                        root: 'objs'
                    }
                }
            });
            var albumStore = Ext.create('AlbumStore');
            albumStore.load({
                params:{
                    id: albumId
                },
                callback: function() {
                    albumStore.each(function(record) {
                        albumPhotos.add({
                            'xtype': 'image',
                            'src': record.get('src'),
                            'style': 'width:200px;height:200px;padding-left:5px;padding-top:5px;' + 
                            'padding-bottom:15px;cursor:pointer;'
                        });
                    });
                }
            });
        }

    }
});