1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    145
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default Unanswered: Ext.getCmp('panelid').push() not working within a panelid function

    Unanswered: Ext.getCmp('panelid').push() not working within a panelid function


    Hi, when I use the below code, the console always says "push is undefined". How do I make it work work?

    Code:
    Ext.define("test.view.AccountNav", {
        extend: 'Ext.navigation.View',
        xtype: 'accountnav',
    
    
        loadPage: function() {
    
            // none of these approaches work:
    
            this.up('accountnav').push({
                html: 'boo'                                                                                
            });     
    
            Ext.getCmd('accountnav').push({
                xtype: 'signupform'                                                                                
            });     
    
    
       },
    
       initialize: function() {
            this.loadPage();
       }
    
    
    });
    What comes around goes around

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    Try following code:

    Code:
    var view = Ext.create('Ext.NavigationView', {
        fullscreen: true,
        id:'nav',
    
    
        items: [{
            title: 'First',
            items: [{
                xtype: 'button',
                text: 'Push a new view!',
                handler: function() {
                    // use the push() method to push another view. It works much like
                    // add() or setActiveItem(). it accepts a view instance, or you can give it
                    // a view config.
                    Ext.getCmp('nav').push({
                        title: 'Second',
                        html: 'Second view!'
                    });
                }
            }]
        }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    145
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    But that is not what I'm trying to do. I know I can define items and do it in there, like your code example (that is the common way, I'm use to).

    The issue is I'm trying to do it within a function of that object. Any ideas how to make that work?
    What comes around goes around

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    145
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    Well it can be solved by doing this (which I can't believe I didn't realise earlier, nor anyone else?):

    Code:
    this..push({
                html: 'boo'                                                                                
    });
    However it doesn't always work. Any ideas why?
    What comes around goes around

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Hyderabad
    Posts
    41
    Answers
    2
    Vote Rating
    0
    janardhan pasumarthi is on a distinguished road

      0  

    Default


    @coletek

    Its due to scope problem. If you are in button handler, then 'this' will contain button details not navigation view details. That's the reason, you are not be able to push the view. fix for that will be to add
    Code:
    scope: this
    configuration to button.
    Code:
     xtype: 'button',
                text: 'Push a new view!',
               scope: this,
                handler: function() {
                    // use the push() method to push another view. It works much like
                    // add() or setActiveItem(). it accepts a view instance, or you can give it
                    // a view config.
                    this.push({
                        title: 'Second',
                        html: 'Second view!'
                    });
                }

    It should solve the problem.

    Thanks.

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    145
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    Let me explain this differently. I don't want the push to be triggered by a button. What I'm really trying to achieve is pushing a panel based on the condition of a variable.

    So in my original example the loadPage() function I would like to be able to do:

    Code:
    if (!is_logged_in) {
        this.push({
            xtype: 'signupform'
        });
    }
    That way when you visit this navigation view, it will automatically push the 'signupform' xtype. Otherwise you will get the navigation view.

    Does that make sense now? So how do I solve the scope issue without using a button, as my example in this comment says. Alternatively, how do I automatically push something (i.e. without having to trigger it via a button!).

    Cheers,
    What comes around goes around

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    Hyderabad
    Posts
    41
    Answers
    2
    Vote Rating
    0
    janardhan pasumarthi is on a distinguished road

      0  

    Default


    Well, that makes sense !

    I've tried your scenario in my machine. It works fine for me. I didn't see any issue there. can you tell me, In which case, you are not able to push the view?

    Thanks

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    145
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    Maybe this issue is related to the previous screen (which is the root screen of the app):

    Code:
    Ext.define("test.view.Main", {
        extend: 'Ext.Panel',
        xtype: 'mainpanel',
    
    
        requires: [
            'Ext.TitleBar',
            'Ext.Img',
            'test.view.AccountNav'
        ],
    
    
        config: {
    
    
            layout: 'card',
    
    
            items: [
                {
                    id: 'start_button',
                    xtype: 'image',
                    html: 'Touch anywhere to begin'
                },
                {
                     xtype: 'accountnav'
                }
    
    
            ]
        }
    });
    Where the "Touch anywhere to begin" is handled by the following controller:
    Code:
    Ext.define('test.controller.Main', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                main: 'mainpanel',
    
                startbutton: 'img#start_button'
            },
            control: {
                startbutton: {
                    tap: 'onStartButton'
                }
            }
        },
    
    
        onStartButton: function() {
            console.log("onStartButton");
            this.getMain().getLayout().setAnimation({type: 'flip'});
            this.getMain().setActiveItem(2);
        }
    
    
    });


    Now, when I click on the image, the onStartButton is called and "main" is flipped to the "accountnav" navview, and if (!is_logged_in) it should push "signupform" onto the navview stack.

    However if I click on the image straight away it doesn't push the "signupform", while if I wait a few seconds and then click on the image, it does push the "signupform".

    Any ideas why? Cheers,
    What comes around goes around

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Location
    Hyderabad
    Posts
    41
    Answers
    2
    Vote Rating
    0
    janardhan pasumarthi is on a distinguished road

      0  

    Default


    Tried your code. It works fine for me. code looks fine. Check your sign up form code. Only that was left.