Push Pop operations in Naviagtion view Sencha Touch

Question

I am trying to use a navigation view and execute the push and pop operations over it , But cant find where exactly i can define the object view , which would be used for view.push and view.pop. cause i am getting this error that view isnt defined ! if trying to define Third_Navigate into a var view like

var view = Ext.define('MyFirstApp.view.Third_Naviagte', { .. });

then i am getting the error view.push isnt defined. Help.

Ext.define('MyFirstApp.view.Third_Naviagte', {
extend: 'Ext.navigation.View',
xtype: 'navigationview',
//itemId:'navView',
//we only give it one item by default, which will be the only item in the 'stack' when it loads
config:{
items: [
    {
        //items can have titles
        title: 'Navigation View',
        padding: 10,

        //inside this first item we are going to add a button
        items: [
            {
                xtype: 'button',
                text: 'Push another view!',
                handler: function() {
                   //when someone taps this button, it will push another view into stack
                    view.push({
                        //this one also has a title
                        title: 'Second View',
                        padding: 10,

                        //once again, this view has one button
                        items: [
                            {
                                xtype: 'button',
                                text: 'Pop this view!',
                                handler: function() {
                                    //and when you press this button, it will pop the current view (this) out of the stack
                                    view.pop();
                                }
                            }
                        ]
                    });
                }
            }
        ]
    }
]}

});

Answer 1

The reason your example with var view = Ext.define(...); is not working is because Ext.define unlike Ext.create doesn't return an Object instance. It should be var view = Ext.create(...);.

Alternative way to do it would be using the up method used for selecting ancestors.

In your handler function use this to get the button instance and from there you can select the navigationview like so:

handler: function() {
    var view = this.up('navigationview');
    view.push({
        title: 'Second View',
        padding: 10,
        items: [
            {
                xtype: 'button',
                text: 'Pop this view!',
                handler: function() {
                    view.pop();
                }
            }
        ]
    });
}