如何在 Sencha Touch 中销毁非活动视图

Posted 2023-02-25

【中文标题】如何在 Sencha Touch 中销毁非活动视图

【英文标题】：How to destroy an inactive view in Sencha Touch

【发布时间】：2012-05-11 08:42:44

【问题描述】：

我遇到了一个我认为非常重要的问题。 在一个简单的 Sencha Touch App 中，我有很多视图。我的 Mainview 是一个 TabPanel，底部有停靠图标。有时在我的应用程序中，我切换到 Tabpanel 之外的另一个视图。我不希望 DOM 因视图而过载，我不再需要，所以我正在寻找一种解决方案来在视图不活动时销毁视图。 我试过这个，同时在我的控制器中切换到另一个视图：

this.getMainview().destroy();

Mainview 似乎被删除了，但我收到一个错误：

Uncaught TypeError: Cannot read property 'dom' of null

所以我猜想 .destroy() - 方法有问题还是有更好的方法来处理这个问题？

【参考方案1】：

在移动到新视图之前，您可以调用下面的代码来删除当前视图

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  

或者您也可以提供项目对象而不是 ActiveItem

【讨论】：

第二次调用视图时这无济于事

【参考方案2】：

我以前多次被这个问题困扰过。目前看来，Sencha Touch 2 中并没有高效且真正无bug的解决方案。当第二次再次添加视图时，该令人不快的错误将再次出现。

一个可能的解决方案：

这段代码sn-p：

your_container(your_container.getActiveItem(), false);

实际上不会从内存中销毁您的子组件，而是从 DOM 中销毁。以后添加的时候不会报错（我已经测试过了）。

希望对你有帮助。

【讨论】：

你的意思是 your_container.remove(your_container.getActiveItem(), false) 我猜？

【参考方案3】：

我会公开我的情况以及我是如何解决的。

我有一个带有图标的 TabPanel。这些选项卡之一显示项目列表。当您单击一个项目时，您将被带到一个显示其描述的新面板。如果单击后退按钮，则该面板将被销毁并返回到列表。这样你就破坏了现在不用的“描述”面板。

所以我所做的是创建一个函数来根据单击的项目的索引来实例化描述面板：

function project(i) 
    var v;
    switch(i) 
        case 0:
            v = Ext.create( 'Ext.Panel', 
                title: 'title',
                layout:  type: 'fit' ,
                id: 'project0',
                iconCls: '',
                style: '',
                html: 'my html'
                );
            break;
    
    return v;

现在，在列表的“itemtap”事件中，我有这个：

var lastItem = container.add(project(i));
itemsList.hide(); //hide the List and display only the new Panel in the container

现在，我在标题中有一个按钮可以返回到上一个视图（即列表），这是该按钮的“点击”事件：

container.remove(lastItem, true); //hide and destroy it
itemList.show(); //show the List again

因此，如果我现在在列表和描述项（面板）之间来回切换，则没有问题，因为每次单击它们时都会得到一个新实例，同样当我返回时它会被破坏。

这解决了我的问题。