autoDestroy 的行为:在 Extjs4 中为 false

发布于 2025-01-07 22:43:07 字数 1286 浏览 0 评论 0原文

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>

但它给出了未捕获的类型错误:单击按钮时无法读取 null 的属性“选项卡”。为什么 ?

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 ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

放我走吧 2025-01-14 22:43:07

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文