I have two Examples whitch are nearly identical.
But the first Example (EXAMPLE 01) works, the second example (EXAMPLE 02) didn't work.
The Problem is, that I need the EXAMPLE 02.

***** EXAMPLE 01 *****

I have a tabpanel and I open a new tab in this tabpanel
The content of the tabpanel is a toolbar and gridpanel
I will receive the content of the tabpanel with an request
--> I can open the tab and close the tab and reopen the tab --> there are no problems

I HAVE A TABPANEL
TABPANEL

Code:
var tabPanel = Ext.getCmp('tabpanel');
I open a new Tab in the tabpanel

Code:
var uniqueId = '1554356491'; 
var toolbar = Ext.create('Ext.toolbar.Toolbar', { 
    id: 'id_' + uniqueId + '_toolbar', 
    enableOverflow: true 
}); 
var newTab = tabPanel.add({ 
    title: 'Papierkorb', 
    id: 'id_' + uniqueId + '_panel', 
    closable: true, 
    tabTip: 'Papierkorb Tab', 
    layout: 'border', 
    hideMode: 'offsets', 
    tbar: toolbar, 
    isDocument: true 
}); 
var contentPanel = newTab.add({ 
    region: 'center', 
    id: 'id_' + uniqueId + '_content', 
    autoScroll: true 
}); 
newTab.setVisible(true); 
newTab.uniqueId = uniqueId;
Update the content panel with the synchron request response:
I do a request and get the tabcontent as response
With this resonse I update the content panel

Code:
var tabContent = synchronRequest(...); 
contentPanel.update(tabContent, true);
Code:
// THE SYNCHRON REQUEST RESPONSE 
// TAB CONTENT: TO UPDATE THE CONTENT PANEL 
<script type="text/javascript"> 
    // TOOLBAR 
    var idHash = 'Papierkorb'; 
    if(isNaN(idHash)) { idHash='Papierkorb'.idHash() } 
    var toolbar = Ext.getCmp('id_' + idHash + '_toolbar'); 
    toolbar.removeAll(true); 
    var items = ... 
    toolbar.add(items); 
    toolbar.doLayout(); 
</script> 
<script type="text/javascript"> 
    // PANEL 
    var contentPanel = Ext.create('Ext.panel.Panel', { 
        id: 'trash_table_1_panel',  
        hideMode: 'offsets',  
        border: false,  
        layout: 'fit',  
        autoWidth: true,  
        autoHeight: true,  
        layout: 'fit' 
    }); 
    // SELECTION MODEL 
    var selectionModel_trash_table_1 = Ext.create('Ext.selection.CheckboxModel', {mode: 'MULTI'}); 
    // DATA STORE 
    var dataStore_trash_table_1 = Ext.create('Ext.data.Store', { 
        proxy: Ext.create('Ext.data.proxy.Ajax', { 
            url: 'list.trash',  
            timeout: 300000,  
            autoDestroy: true,  
            extraParams : {},  
            reader: { type: 'json', rootProperty: 'rows', successProperty: 'success', messageProperty: 'message'} 
        }), 
        baseParams: {},  
        model: Ext.define(null, {  
            extend: 'Ext.data.Model',  
            fields: ['type', 'id', 'subject', 'activity', 'doccount',  'created', 'deleted', 'modifier', 'deletedbyuser', 'rowid', 'rowclass'] 
        }),  
        autoload: false,  
        remoteSort: true,  
        groupOnSort: false,  
        sortInfo: { field: 'cell0', direction: 'ASC'} 
    }); 
    var onLoadShowMethod_trash_table_1 = function() { var _reader = dataStore_trash_table_1.reader; }; 
    // PAGING TOOLBAR 
    var fieldRowCount = Ext.create('Ext.form.field.Number', { 
        allowBlank: false,  
        width: 30,  
        minValue: 0,  
        maxValue: 100,  
        enableKeyEvents: true,  
        value: '10' 
    }); 
    fieldRowCount.rowCountReload = function() {if (this.isValid(false))  {ch.ser.grid.setRowCount('trash_table_1', this.getValue(),  'saveDataGridSettings', 'trash_table');}}; 
    fieldRowCount.on('keydown', function(field, e) { if (e.getKey() !=  e.RETURN) return;field.un('blur',  field.rowCountReload);field.rowCountReload(field);}); 
    fieldRowCount.on('focus', function(field) {;field.on('blur', field.rowCountReload);}); 
    var trash_table_1PagingToolbar = new ch.ser.grid.PagingToolbar({ 
        id: 'trash_table_1_bottomtoolbar', 
        items : [new Ext.toolbar.Separator(), fieldRowCount, 'Zeilen pro Seite'], 
        pageSize: 10,  
        autoWidth: true,  
        autoHeight: true,  
        autoShow: true, 
        store: dataStore_trash_table_1 
    }); 
    // GRID PANEL 
    var trash_table_1 = Ext.create('Ext.grid.Panel', { 
        store: dataStore_trash_table_1, 
        enableColumnMove: true,  
        enableHdMenu: true,  
        columns: [ 
            {text: 'Typ', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'type'}, 
            {text: 'Kennzeichen', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'id'}, 
            {text: 'Betreff', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'subject'}, 
            {text: 'Aktivitt', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'activity'}, 
            {text: 'Anz. Dok.', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'doccount'}, 
            {text: 'Erstellt am/um', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'created'}, 
            {text: 'Gelscht am/um', sortable: true, hideable: true, resizeable: true, hidden: false, width: 100,dataIndex: 'deleted'}, 
            {text: 'Letze(r) Bearbeiter(in)', sortable: true, hideable: true,  resizeable: true, hidden: false, width: 100,dataIndex: 'modifier'}, 
            {text: 'Gelscht von', sortable: true, hideable: true,  resizeable: true, hidden: false, width: 100,dataIndex: 'deletedbyuser'} 
        ],  
        stripeRows: true,  
        frame: false,  
        hideMode: 'offsets',  
        border: false,  
        stateful: false,  
        selModel: selectionModel_trash_table_1,  
        listeners:{ celldblclick: function(grid, rowIdx, colIdx, event){ ... }, 
        id: 'trash_table_1',  
        bbar: trash_table_1PagingToolbar, 
        autoWidth: true,  
        autoHeight: true 
    }); 
    ch.ser.grid.enableTextSelection(trash_table_1); 
    trash_table_1.on('columnmove', function()  {ch.ser.grid.saveSettings(Ext.getCmp('trash_table_1'),  'saveDataGridSettings','trash_table');}, this, {buffer: 100}); 
    trash_table_1.on('sortchange', function()  {ch.ser.grid.saveSettings(Ext.getCmp('trash_table_1'),  'saveDataGridSettings','trash_table');}, this, {buffer: 100}); 
    trash_table_1.on('columnresize', function()  {ch.ser.grid.saveSettings(Ext.getCmp('trash_table_1'),  'saveDataGridSettings','trash_table');}, this, {buffer: 100}); 
    Ext.getCmp('trash_table_1').getStore().on('groupchange', function()  {ch.ser.grid.saveSettings(Ext.getCmp('trash_table_1'),  'saveDataGridSettings','trash_table');}, this, {buffer: 100}); 
    Ext.getCmp('trash_table_1').getStore().on('load', onLoadShowMethod_trash_table_1, Ext.getCmp('trash_table_1')); 
    selectionModel_trash_table_1.on('selectionchange', function()  {handleTrashToolbarButtons('trash_table_1');}, this, {buffer: 100}); 
    Ext.getCmp('trash_table_1_panel').add(trash_table_1);Ext.getCmp('trash_table_1_panel').doLayout(); 
    // HEADER MENU 
    var noGroupMenuEntry = Ext.create('Ext.menu.Item', {id :  'group_idtrash_table_1', text : 'Gruppierung aufheben', icon :  'images/actions/shared/ungroup.gif'}); 
    noGroupMenuEntry.on('click', function() {ch.ser.grid.groupBySettings('trash_table_1');}, this, {buffer: 100}); 
    var restoreMenuEntry = Ext.create('Ext.menu.Item', { id :  'restore_idtrash_table_1', text : 'Zurcksetzen', icon :  'images/actions/shared/reset.gif'}); 
    restoreMenuEntry.on('click', function() {ch.ser.grid.restoreSettings('trash_table');}, this, {buffer: 100}); 
    var menu = trash_table_1.headerCt.getMenu(); 
    menu.insert(8, noGroupMenuEntry); 
    menu.insert(9, Ext.create('Ext.menu.Separator', {xtype: 'menuseparator'})); 
    menu.insert(10, restoreMenuEntry); 
    // LOAD DATA 
    dataStore_trash_table_1.load({params: { start: 0, limit: 10 }}); 
</script> 
<script type="text/javascript"> 
    var uniqueId = '1'; 
    var idHash = "Papierkorb".idHash(); 
    var contentPanel = Ext.getCmp('id_' + idHash + '_content'); 
    var contentPanelTable = Ext.getCmp('trash_table_' + uniqueId + '_panel'); 
    // I ADD THE CONTENT PANEL WITH THE TABLE TO THE CONTENT PANEL 
    contentPanel.add(contentPanelTable); 
</script> 
// END OF THE RESPONSE

***** EXAMPLE 02 *****

I Have a tabpanel and i open a new tab in this tabpanel
The content of the tabpanel is a toolbar and gridpanel, but there are also some html-elements
I render the content panel to the to an html-div: trash_table_1_div
I will receive the content of the tabpanel with an request
--> I can open the tab and close the tab and reopen the tab --> there are some problems:
- Ext.ComponentManager.register(): Registering duplicate id "trash_table_1_panel" with this manager
- DOM element with id trash_table_1_div in Element cache is not the same as element in the DOM. Make sure to clean up Element instances using destroy()

I have a tabpanel

Code:
var tabPanel = Ext.getCmp('tabpanel');
I open a new tab in the tabpanel

[CODE]
var uniqueId = '1554356491';
var toolbar = ... // the same as in EXAMPLE 01
var newTab = ... // the same as in EXAMPLE 01
[CODE]

Update the content panel with the synchron request response:
I do a request and get the tab content as response
With this response I update the contentpanel

Code:
var tabContent = synchronRequest(...); 
contentPanel.update(tabContent, true);
Code:
// THE SYNCHRON REQUEST RESPONSE 
// TAB CONTENT: TO UPDATE THE CONTENT PANEL 
<div id="trashDiv" valign="top" helpPage="help120.htm" autoResize="true"> 
<table id="trashTabPane" class="dynamicTabPaneBackground" width="100%" height="100%"> 
<tr> 
<td height="100%" valign="top"> 
<table id="trashTabPane_border" width="100%" height="100%" class="dynamicTabPaneForeground"> 
<tr> 
<td valign="top" height="100%"> 
<!-- EXT TOOLBAR --> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr valign="top"> 
<td style="vertical-align:top;" nowrap="nowrap"> 
<script type="text/javascript"> 
    var idHash = 'Papierkorb'; 
    if(isNaN(idHash)) {idHash='Papierkorb'.idHash()} 
    var toolbar = Ext.getCmp('id_' + idHash + '_toolbar'); 
    toolbar.removeAll(true); 
    var items = ...  
    toolbar.add(items); 
    toolbar.doLayout(); 
</script> 
</td> 
</tr> 
</table> 
<!-- TRASHTABLE --> 
<table id="workbasketTableTabPane" class="contentTabPaneBackground" width="100%" height="100%"> 
<tr> 
<td height="100%" valign="top"> 
<table id="workbasketTableTabPane_border" width="100%" height="100%" class="contentTabPaneForeground"> 
<tr> 
<td valign="top" height="100%"> 
<div id="trashListContentDiv"> 
<!-- THE DIV TO RENDER TO THE contentPanel --> 
<div id="trash_table_1_div" name="trashTableMultiSelect"></div> 
<script type="text/javascript"> 
    // I RENDER THE CONTENT PANEL TO THE HTML-DIV: trash_table_1_div 
    var contentPanel = Ext.create('Ext.panel.Panel', { 
        id: 'trash_table_1_panel',  
        renderTo: 'trash_table_1_div',  
        hideMode: 'offsets',  
        border: false,  
        layout: 'fit',  
        autoWidth: true,  
        autoHeight: true,  
        layout: 'fit' 
    }); 
    // SELECTION MODEL 
    var selectionModel_trash_table_1 = Ext.create('Ext.selection.CheckboxModel', {mode: 'MULTI'}); 
    ... the same as in EXAMPLE 01 
</script> 
</div> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</div> 
// END OF THE RESPONSE
In EXAMPLE 01 I have no Problems to open, close and reopen the tabPanel.
In EXAMPLE 02 I have Problems:
- Ext.ComponentManager.register(): Registering duplicate id "trash_table_1_panel" with this manager
- DOM element with id trash_table_1_div in Element cache is not the same as element in the DOM. Make sure to clean up Element instances using destroy()
So in EXAMPLE 02 I have to Destroy the Objects/Elements manually after close the tabpanel, so that I can reopen the tabpanel without problems.
- Ext.destroy(Ext.getCmp('trash_table_1_panel'));
- Ext.destroy(Ext.get('trash_table_1_div'));

MY QUESTIONS
- Wy will the Objects/Elements ('trash_table_1_panel', 'trash_table_1_div') in EXAMPLE 02 not are destroyes automatically?
- What do I have to do to destroy this objects/elements automatically when the tabpanel will be closed?
(The example was an easy example, I have a lot of more complex examples, so that I did not want to destroy the objects/elements manually)
- Is there any possibility to switch of the Errors of EXAMPLE 02?
(I tried it with comment out all debug-code from the Ext-JavaScript-Files, but then I have other Errors when I reopen the tabpanel)