Logout change view sencha touch

Question

Hi I need to implement keep login in my sencha touch application

Please see my code below:

Login.js - Once user click login, it will store "sessionToken" in local storage.Then it will go to main Page

   onBtnLoginClick: function(){

            var loginviewGetValue =  Ext.getCmp('loginview').getValues();
            var bbid =  Ext.getCmp('bbID').getValue();
            var bbpassword =  Ext.getCmp('bbPassword').getValue();
                var LoginLS =   Ext.getStore('LoginLS');





                                    LoginLS.add({
                                        sessionId: 'sadsadsadasd'
                                       ,deviceId:'1'
                                       ,bb_id :bbid
                                       });

                                       LoginLS.sync();      

                                   var mainForm= Ext.create('bluebutton.view.Main');
                                    Ext.Viewport.setActiveItem(mainForm);

App.js~ Everytime launch function will check sessionToken in localStorage. If Localstorage is empty then it will go to login page.Else it will go to main Page

        launch: function() {




        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();


        // Initialize the main view

             var LoginLS = Ext.getStore('LoginLS');
             LoginLS.load();

             var record =  LoginLS.getAt(0);


            if(record != undefined){
                var sessionId = record.get('sessionId');
               if (sessionId !=undefined){
                     Ext.Viewport.add(Ext.create('bluebutton.view.Main'));
               }
               else
                   Ext.Viewport.add(Ext.create('bluebutton.view.Login'));

            }
            else{
               Ext.Viewport.add(Ext.create('bluebutton.view.Login'));
               }

//        Ext.create('bluebutton.view.TopMenuList');

    },

Logout.js~Logout will clear the sessionToken and go to login page again

onLogoutClick: function scan() {
                var LoginLS = Ext.getStore('LoginLS');


                     Ext.Viewport.setMasked({
                        xtype: 'loadmask',
                        message: 'Loading...'
                    });



                 LoginLS.load();

                 var record =  LoginLS.getAt(0);
                   LoginLS.removeAll();
                    LoginLS.sync();
                   //Load a new view


//                   Ext.getCmp('tabpanel').destroy();






                var loginForm = Ext.create('bluebutton.view.Login');
                Ext.Viewport.setActiveItem(loginForm);   

                Ext.Viewport.setMasked(false); // hide the load screen

But i having a problem now. I not able to go back login page. It go to the blank page. Please give me some solution. Thanks.

Here is the error i get

    [WARN][Ext.data.Batch#runOperation] Your identifier generation strategy for the model does not ensure unique id's. Please use the UUID strategy, or implement your own identifier strategy with the flag isUnique. Console.js:35
[WARN][Ext.Component#constructor] Registering a component with a id (`loginview`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`. Console.js:35
[WARN][Ext.Component#constructor] Registering a component with a id (`bbID`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`. Console.js:35
[WARN][Ext.Component#constructor] Registering a component with a id (`bbPassword`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`. Console.js:35
[WARN][Ext.Component#constructor] Registering a component with a id (`btnLogin`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`. Console.js:35
[DEPRECATE][bluebutton.view.Login#show] Call show() on a component that doesn't currently belong to any container. Please add it to the the Viewport first, i.e: Ext.Viewport.add(component); 

Answer 1

Looking at the error messages it is clear that you are trying to create login panel again without destroying existing component. Error comes because you are not allowed to use same id more than once in application.

To avoid this you should not create same view multiple times, you should reuse views which is good for performance also. One more thing, you should give id to n element if and only if you can't do without it.

Assuming you cannot avoid id attributes you should do one of these 2 things:

1. Create new view only if it doesn't exist

   var loginView = Ext.getCmp("loginview");
   if(!loginView){
       loginView = Ext.create('bluebutton.view.Login');
   }
   

2. destroy login view as soon as it is out(hide/erased) of viewport by calling:

   var loginView = Ext.getCmp("loginview");
   loginView.destroy();
   

Answer 2

Use itemId for your components instead of idand reference them accordingly in you Controller. Check this question out: Warning saying `Id` exist and should be destroyed