Behaviour of autoDestroy: false in Extjs4

How does autoDestroy:false actually works in Ext-Js 4. I am intending to close the tab and then recreate it on click of button, See the code here:

    <html>
    <head>
     <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
     <script type="text/javascript" src="../bootstrap.js"></script>
     <script type="text/javascript">Ext.require('Ext.tab.*');

    Ext.onReady(function(){

var tabs = Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    autoDestroy: false,
    items: [{
        title: 'Home',
        html: 'Home',
        itemId: 'home'

    }, {
        title: 'Tickets',
        html: 'Tickets',
        itemId: 'tickets',
        closable: true,
        closeAction: 'hide'
    }]
});

Ext.create('Ext.button.Button',{
    id: 'buttonId',
    text: 'Recreate Tab',
    renderTo: Ext.getBody(),
    handler: function(){
        var tickets = tabs.child('#tickets');
        tickets.tab.show();

    }
});

  });

</script>
 </head>
  <body>
  <div id="tabs1">
     <div id="script" class="x-hide-display"></div>
     <div id="markup" class="x-hide-display"></div>
 </div>
</body>
</html>

But it gives Uncaught TypeError: Cannot read property 'tab' of null on click of button. Why ?

Answers:

Answer

After the close, the tickets tab is removed from the tab panel. Thus when you look for it using tabs.child('#tickets') you get null back. On the next line you are effectively calling null.tab hence the error. You'll need to keep track of the panel before it closes and then use tabs.add to bring it back.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.