Sencha Touch：注销时销毁面板答案

【问题标题】：Sencha Touch: destroy panel on logoutSencha Touch：注销时销毁面板
【发布时间】：2014-09-01 08:55:58
【问题描述】：

当用户注销时，我想删除所有面板，特别是登录页面之后应用程序的主条目，即“Main.js”及其子视图，如您在下面看到的“我的数据”，原因是我想确保加载正确的商店数据而不显示旧数据。

但是，我不确定如何执行此操作以及在用户注销时卸载存储/删除视图的最佳做法。

处理用户注销的最佳做法是什么？

Main.js

Ext.define('app.view.Main', {

extend: 'Ext.tab.Panel',

xtype: 'main',

requires: [
    'app.view.TeacherPanel',
    'app.view.ParentPanel',
    'app.view.AboutPanel',
    'app.view.user.Profile'
],

config: {

    tabBarPosition: 'bottom',

},

initialize: function() {

    console.log('main.initialize');

    this.callParent(arguments);

    // add data panel
    var dataPanel = {
        title: 'My Data',
        iconCls: 'home',
        xtype: eMaliApp.services.App.getActivePanel()
        store: 'somestore' // i want this to be reloaded
    };
    this.add(dataPanel);

    // add user panel
    var profilePanel = {
        title: 'Profile',
        iconCls: 'user',
        xtype: 'userprofile'
    };
    this.add(profilePanel);

    // add about panel
    var aboutPanel = {
        title: 'About',
        iconCls: 'info',
        xtype: 'aboutpanel'
    };
    this.add(aboutPanel);

    // Load general app data
    app.services.Store.loadSomeStores();
}

});

Profile.js

onLogoutTap: function(e) {
    Ext.Ajax.request({
        url: 'session/mobileLogout',
        method: 'POST',
        useDefaultXhrHeader: false,
        withCredentials: true,
        callback: function(options, success, response) {
            if (!success) {
                console.log('Logout failed, redirecting to login page anyway');
            }
            //Ext.getCmp('main').destroy(); // should be so
            Ext.Viewport.removeAll(true, true); // does not remove main
            Ext.Viewport.add(Ext.create('app.view.LoginPanel'));
        }
    });
}

【问题讨论】：

标签： extjs sencha-touch-2 sencha-touch-2.1

【解决方案1】：

通常我会在停用时销毁所有视图

Ext.define('App.controller.View', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        view: '.whatever your view is comes here. Take a look at autocreate.'
    },
    control: {
        view: {
            deactivate: 'onViewDeactivate'
        }
    }
},

onViewDeactivate: function (view) {
    Ext.defer(function () {
        view.destroy();
    }, 500);
},

这将在 500 毫秒（动画所需的时间）后销毁当前视图。不过，有一个地方可以做这件事是件好事。

但回到你的例子：

 var items = Ext.Viewport.getItems();

现在迭代所有项目并销毁它们。

【讨论】：