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 ?

回答1:

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.

来源：https://stackoverflow.com/questions/9409407/behaviour-of-autodestroy-false-in-extjs4

标签

javascript

extjs4

typeerror

tabpanel