Question

autoDestroy：false实际上如何在Ext-Js 4中起作用。我打算关闭选项卡，然后单击按钮重新创建它，请参阅此处的代码：

    <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>

但是它给出了Uncaught TypeError：单击按钮时无法读取null的属性'tab'。为什么？

Answer 1

关闭后，将从选项卡面板中删除“票证”选项卡。因此，当您使用tabs.child('#tickets')查找它时，您将返回null。在下一行，您实际上正在调用null.tab因此错误。您需要在关闭面板之前跟踪该面板，然后使用tabs.add将其恢复。

autoDestroy的行为：Extjs4中的false

1 个答案: