Buttons on View not working after adding and removing from viewport

[ron_stahl]

In my application I have a login view that is loaded into the viewport. Once the user sucessfully logs into the system I add another view to the viewport and set the new view as the active item. When the user log out of the application I remove the current view and then set the active item back to the log in form. When the user logs in again the view that was removed is the added again to the viewport but this time the list view is showing the old data and the buttons no longer work.

Viewport Controller:

Ext.define('RDPMobile.controller.Viewport',{
    extend: 'Ext.app.Controller',


    refs: [
        {
            ref: 'viewport',
            selector: 'rdpmobile-viewport'
        }
    ],


    init: function() {
        this.control({
            'rdpmobile-viewport' : {
                activeitemchange : 'handleItemChange'
            },
            'rdpmobile-viewport button[id=logout]' : {
                tap: this.logout
            }
        })
    },


    handleItemChange: function(viewport, newCard, oldCard) {
        var isFirst = newCard.isXType('rdpmobile-login'),
            logoutBtn = viewport.down('button[id=logout]');


        logoutBtn.setHidden(isFirst);


        if (isFirst) {
            viewport.remove(oldCard);
        }
    },


    logout: function() {
        var viewport = this.getViewport(),
            topToolbar = viewport.down('titlebar[docked=top]');


        Ext.Viewport.hideKeyboard();


        Ext.Msg.confirm('Log Out?', 'Are you sure you want to log out?', function(answer) {
            if (answer === 'yes') {
                viewport.setActiveItem(0);
                topToolbar.setTitle(topToolbar.defaultTitle);
            }
        });
    }


});

Login Controller:

    Ext.define('RDPMobile.controller.Start.Login',{
        extend: 'Ext.app.Controller',


        views: [
            'Start.Login'
         ],


        model: [
            'Start.Login'
        ],


        store: [
            'Start.Login'
        ],


        refs: [
            {
                ref     : 'login',
                selector: 'Login',
                autoCreate: true,
                xtype : 'rdpmobile-login'
            },
            {
                ref      : 'viewport',
                selector : 'rdpmobile-viewport'
            },
            {
                ref     : 'formPanel',
                selector: 'formpanel'
            },
            {
                ref     : 'loginButton',
                selector: 'button[id=login]'
            }
        ],


        init: function() {
            this.control({
                'button[id=login]': {
                    tap: this.LoginUser
                }
            })
        },


        LoginUser: function(button) {
            Ext.Viewport.hideKeyboard();
            var form = this.getFormPanel();
            var values = form.getValues();


            var model = Ext.create('RDPMobile.model.Start.Login',values);


            var errors = model.validate();


            if (errors.isValid()) {
                form.reset();
                var me         = this,
                    viewport   = me.getViewport(),
                    topToolbar = viewport.down('titlebar[docked=top]'),
                    newCard    = viewport.add({
                        xtype : 'rdpmobile-wolist'
                    });


                viewport.setActiveItem(newCard);


                topToolbar.setTitle('Work Orders')


            } else {
                var message = '';
                Ext.each(errors.items, function(rec,i){
                    message += rec.message + '<br>';
                })
                Ext.Msg.alert('Login',message);
            }
        }




    })

Thanks
Ron

[mitchellsimoens]

The problem is once you remove a component, that instance is destroyed by default. You should recreate an instance of the login form and add it to the viewport.

[ron_stahl]

The login form is working. The problem I am having is the rdpmobile-wolist is not working when it is reloaded into the viewport after logging out and back in.

Thanks again for your help.

[ron_stahl]

After further investigation and reading this post http://www.sencha.com/forum/showthre...-removing-card I determined the problem was that I was using id as my ComponentQuery. Once I changed this to action the handlers worked again after reload.

[blakdronzer]

Hi Mitchell..

I agree with your solution but just a noob question .. as how should one re-create instance of the form and add it..
should it be Ext.create('Form') and add that to the viewport? or is there some other / better way for the same.
Secondly .. wanted to understand .. that in one of the forums you commented that the ref - points to the first instance of the object created. When we create new instance of the form, will the ref .. automatically point it back to the new instance?
As in the above instance of the code.. will this.getFormPanel() will return the new instance created?

[mitchellsimoens]

I agree with your solution but just a noob question .. as how should one re-create instance of the form and add it..
should it be Ext.create('Form') and add that to the viewport? or is there some other / better way for the same.

Yes.

Secondly .. wanted to understand .. that in one of the forums you commented that the ref - points to the first instance of the object created. When we create new instance of the form, will the ref .. automatically point it back to the new instance?
As in the above instance of the code.. will this.getFormPanel() will return the new instance created?

The ref will always point to the first instance. If that instance gets destroyed, the ref will not automatically try to get the next instance. Hopefully this will change, I rarely use refs because of this.

[blakdronzer]

Yes.



The ref will always point to the first instance. If that instance gets destroyed, the ref will not automatically try to get the next instance. Hopefully this will change, I rarely use refs because of this.

Thanks Mitchell .. for the quick update. I really appreciate and admire your reply .. but just in that case wanted to understand that if in case we don't use the refs for retrieving the forms, then what is the best mechanism for the same.. can you through some light on the same?

[mitchellsimoens]

Use ComponentQuery. Try to use the up(), down(), query() methods on components to travel up/down the hierarchy but if a component isn't easily resolved with them, then I go with Ext.ComponentQuery.query but that is rare in Sencha Touch I have to do that.