1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    22
    Vote Rating
    0
    ron_stahl is on a distinguished road

      0  

    Default Unanswered: Buttons on View not working after adding and removing from viewport

    Unanswered: Buttons on View not working after adding and removing from viewport


    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:
    Code:
    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:
    Code:
        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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    22
    Vote Rating
    0
    ron_stahl is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    22
    Vote Rating
    0
    ron_stahl is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User blakdronzer's Avatar
    Join Date
    Jan 2011
    Location
    Mumbai, India
    Posts
    27
    Answers
    3
    Vote Rating
    0
    blakdronzer is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by blakdronzer View Post
    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.

    Quote Originally Posted by blakdronzer View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User blakdronzer's Avatar
    Join Date
    Jan 2011
    Location
    Mumbai, India
    Posts
    27
    Answers
    3
    Vote Rating
    0
    blakdronzer is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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?

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.