CODEWITHSUNDEEP
extjssencha-touch-2sencha-touch-2.1
user2867106
user2867106

Reputation: 1131

Sencha Touch: destroy panel on logout

When user logs out, I want to remove all the panels, specifically the main entry to the app after the login page which is the "Main.js" and its subviews like 'My Data' that you see below, the reason is that I want to make sure the right store data will be loaded and not show the old data.

However, I am not sure how to do this and the best practices to unload stores / remove views when the user logs out.

What are the best practices to handling user Logout?

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'));
        }
    });
}

Upvotes: 1

Views: 2238

Answers (1)

Dinkheller
Dinkheller

Reputation: 5054

Usually I destroy all views on deactivate

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);
},

This will destroy the current view, after 500ms (time it takes for the animation). Good thing to have one place where you do this though.

But back to your example:

 var items = Ext.Viewport.getItems();

now iterate to all items and destroy them.

Upvotes: 1

Related Questions