使用焦点切换在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为空 TypeError：el为空 el.addCls.apply（el，arguments）; 在66799线EXT-全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;' 
         }); 
        }); 
       } 
      }); 
     } 

    } 
});