Uncaught TypeError: Cannot call method 'pop' of undefined

[pradipkumar]

Hi,
while i run my sench Touch 2+Phonegap+android application,the back button is working fine for one page, the remaining page are showing the error: Uncaught typeError:Cann't call the method 'pop' of undefined.below the code for pop function..
1>onBackTap: function(btn)
{
var mainNav=btn.up('navigationview');
mainNav.pop();
},
2>my back button code is items:{
xtype:'button',
text:'back',
align:'left'
}
3>In ref I put like this: backBtn: 'titlebar button[text=back]',

Thanks in Advance

[bricemason]

It looks like you're implementing what is already handled for you automatically. The navigation view will already pop the view when you press the back button. Please post more details including:

• Why you're using the code that you posted instead of relying on navigation view's built-in functionality
• A broader context of sample code

Please be sure to wrap your code samples in code tags so they print nicely in your post.

Brice

[pradipkumar]

Hi Sir,
In my application i put the custom back button.Some pages this button is working fine.and some pages it showing an error i have attached the screen shot for this.Kindly help me on this issue. My controller code is:

Ext.define('MyApp.controller.Main', {    extend: 'Ext.app.Controller',


    config: {
        control: {
        	dealsList:{
        		itemtap:'onDealsListItemTap'
        	},
        	loginBtn:{
        		tap:'onLoginBtnTap'
        	},
			forgotbtn:{
				tap:'onforgotClick'
			},
			registerButon:{
				tap: 'onSignup'
			},
        	backBtn:{
        		tap:'onBackTap'
        	},
			
        	detailsscreen:{
        		show:'onDetailsScreenShow'
        	}
			
        },


        refs: {
            mainView: 'main',
            dealsList:'dealslist',
            loginBtn:'login button[text=LOGIN]',
	   forgotbtn:'login button[id=ForgetpassButon]',
	     registerButon:'login button[id=SignupButon]',
             backBtn:'titlebar button[text=back]',
            detailsscreen:'detailsscreen',
            emailId:'emailfield[name=useremail]',
            password:'passwordfield[name=password]',
			mainNavPanel:'navigation'
        }
    },
    onDealsListItemTap:function(view,index,target, record)
    {
    	record_deals=record;
    	//alert(record_deals.get('title'));
    	var mainNav=view.up('navigationview');
    	mainNav.push({xtype:'detailsscreencard'});
    },
    onLoginBtnTap:function(btn)
    {
    	var emailid=this.getEmailId().getValue();
    	var password=this.getPassword().getValue();
		    if (emailid!="" && password!="") {
				Ext.Ajax.request({
				url: 'url name',
					 params: {
						username: emailid,
						password: password,
						type:"user"
					},
				success: function(response) {
					var productData = JSON.parse(response.responseText)
					console.log(productData)
					  //alert(productData.userid);
                         if (productData.go && productData.usertype=="user") {
						//Ext.Viewport.unmask();
						localStorage.useid=productData.userid;
						//userid.setItem('userName',values.userid);
						userid=productData.userid;
						var mainNav=btn.up('navigationview');
						mainNav.push({xtype:'main'});
				      }else if (productData.go && productData.usertype=="merchant") {
						   //Ext.Viewport.unmask();
				       //Ext.Msg.alert("Our system indicates that the email ID you used is a Service Provider, please login from the Service Provider section.");
					   Ext.Msg.alert('message','Our system indicates that the email ID you used is a Service Provider, please login from the Service Provider section');	
																			
					  }
					  else{
						  Ext.Viewport.unmask();
				       Ext.Msg.alert('Error', productData.message);
					  }
				},
			
				failure: function(response) {
					var productData = JSON.parse(response.responseText);
					 Ext.Viewport.unmask();
                     Ext.Msg.alert('Error', productData.message);
				}
				});
			    } else {
                    Ext.Msg.alert('Error', 'Both username and password are required.');
			     }
                
    },onSignup:function(view, item){
			var mainNav=view.up('navigationview');
    	mainNav.push({xtype:'registration'});
			
		 /*this.showRegistration = Ext.create('MyApp.view.Registration');
		  this.getMain().push(this.showRegistration);*/
	},
	onforgotClick:function(view, item){
	var mainNav=view.up('navigationview');
    	mainNav.push({xtype:'forgetpass'});
				
		 /*this.showForgetpass= Ext.create('MyApp.view.Forgetpass');
		  this.getMain().push(this.showForgetpass);*/
	},
   onBackTap:function(btn)
    {
		   	
		var mainNav=btn.up('navigationview');
    	       mainNav.pop();
		
		
    },
	
    onBottomTabChange:function(tab,newTab,oldTab)
    {
    	console.log('SelectedTab-->>'+oldTab.getTitle());
    	console.log('SelectedTab-->>'+newTab.getTitle());
    }
});

MyAccount.js code back button part is:

Ext.define('MyApp.view.MyAccount', {    extend: 'Ext.form.Panel',
	id:'accpanel',
    xtype: 'myaccount',
    config: {
		
        xtype: 'formpanel',
        title: '<img src="resources/images/logo.png" width="130px"/>  ',
        iconCls: 'user',
        layout: 'vbox',


        items: [{
			xtype:'titlebar',
			itemId:'titlebar_detailscreen',
			title: 'Edit your profile',
			docked:'top',
			items:{
				xtype: 'button',
				text: 'back',
				align: 'left'
			   }
		},

Navigation.js code is:

Ext.define('MyApp.view.Navigation',{	extend:'Ext.NavigationView',
	xtype:'navigation',
	requires:['MyApp.view.Main','MyApp.view.Login'],
	config:{
		fullscreen:true,
		navigationBar:false,
       
		items:[
		       {
		    	   xtype:'login'
		       }
		      ]
	}
});

I also have attached the screen shot please check once which is easily understandable.
2012-11-20_1535.jpg
Thanks in advance for giving your valuable time.


Thanks & Regards,
Pradip Kumar

[bricemason]

Lots of stuff going on here:

• The code you provided is incomplete and broken
• The code you provided references components which you didn't provide (Login, Main, etc)
• I don't see where you the MyAccount view was ever pushed into your Navigation view.

With the code that you posted, I would think the problem is that your MyAccount view is never pushed onto Navigation which is why your component query can never find it.

Check this out and determine where you're rendering MyAccount to confirm. If you still need help make sure you provide working code that relates to the problem.

Brice

[pradipkumar]

Hi,
Please check the below code this is for MyAccount.js file.I have already post the Main.js & Navigation.js
MyAccount.js

Ext.define('MyApp.view.MyAccount', {
    extend: 'Ext.form.Panel',
	id:'accpanel',
    xtype: 'myaccount',
    config: {
		
        xtype: 'formpanel',
        title: '<img src="resources/images/logo.png" width="130px"/>  ',
        iconCls: 'user',
        layout: 'vbox',


        items: [{
			xtype:'titlebar',
			itemId:'titlebar_detailscreen',
			title: 'Edit your profile',
			docked:'top',
			items:{
				xtype: 'button',
				text: 'back',
				align: 'left'
			   }
		},
{
            xtype: 'fieldset',
            scrolable: true,
            items: [{
                xtype: 'emailfield',
				label: 'Email',
                name: 'useremail_register',
				id:'email',
				vtype: 'email',
		        inputType: 'email',
				required: true,
                allowBlank: false
            },{
                xtype: 'textfield',
                label: 'First Name',
                name: 'firstname',
				id:'firstnm',
				required: true,
                allowBlank: false
            }, {
                xtype: 'textfield',
                label: 'Last Name',
                name: 'lastname',
				id:'lastnm',
				required: true,
                allowBlank: false
            }, {
                xtype: 'textfield',
                label: 'City',
                name: 'city',
				id:'city',
				required: true,
                allowBlank: false
            },
			{
			xtype: 'hiddenfield',
			name: 'type',
			value: 'user'
            }]
        },
 {
                    xtype: 'button',
            		text: 'Update',
					align: 'center',
					id: 'updatebtn',
           			 ui: 'confirm',
           			 width: '95px',
                     handler:function()
                     {
                         var formval= this.up('formpanel');
						  var values = formval.getValues();
						  
						  if(values.useremail_register!="" && values.firstname!="" && values.lastname!="" && values.city!="")
						   {
						       Ext.Ajax.request({
											   url: 'url name',
											    params: {
															user_id: userid,
															useremail_register: values.useremail_register,
															firstname: values.firstname,
															lastname: values.lastname,
															city: values.city,
															type:"user"
														},
												success: function(updateAcc)
												{
													var updateAccdata= JSON.parse(updateAcc.responseText)
													Ext.Msg.alert(updateAccdata.message);
													
												}
												
											});
						   }
						   else
						    {
								Ext.Msg.alert('Required field must not be left blank');
							}
					  
					   
                     }
             },
			 {
				xtype: 'toolbar',
    			docked: 'bottom',
    			layout: { pack: 'center' },
				items: [
						 {
						   xtype: 'button',
						   cls: 'maronbg',
						   text: 'MY HISTORY',
						     handler: function()
						      {
								 var histroyPage=Ext.create('MyApp.view.MyHistory');
								 //histroyPage.setHtml(history_table);
								 
								 Ext.Viewport.add(histroyPage);
      							 Ext.Viewport.setActiveItem(histroyPage); 
								 
								
						     }
						  },
						   {
						     xtype: 'button',
							 cls: 'maronbg',
						     text: 'MY MESSAGES',
						     handler: function()
						      {
								 var messagePage=Ext.create('MyApp.view.MyMessage');
							     Ext.Viewport.add(messagePage);
      							 Ext.Viewport.setActiveItem(messagePage); 
						      }
						   },
						   {
						     xtype: 'button',
							 cls: 'maronbg',
						     text: 'LOGOUT',
						     handler: function()
						     {
							   Ext.Msg.alert("Sucessfully loged out");
							   var logoutfun=Ext.create("MyApp.view.Login")
							   Ext.Viewport.add(logoutfun);
							   Ext.Viewport.setActiveItem(logoutfun);
						     }
						  }
					]
			 }
		]
    }
});

This is for Login.js:

Ext.define('MyApp.view.Login',{
	extend:'Ext.Panel',
	xtype:'login',
	config:{
		   xtype: 'formpanel',
	        title: '<img src="resources/images/logo.png" width="130px" style="width: 130px !important; height: 25px !important; border:0 none; margin:0 !important;"/>  ',
	        cls:'backgroundgrad',
	        layout: 'vbox',
			scrollable: 'vertical',
		items:[{
			xtype:'titlebar',
			docked:'top',
			title : '<img src="resources/images/logo.png" width="130px" style="width: 130px !important; height: 25px !important; border:0 none; margin:0 !important;" /> ',
		},
		{
            xtype: 'fieldset',
            title: 'Service Seeker Login',
            scrolable: true,
            items: [{
                xtype: 'emailfield',
             /*   label: 'Email',*/
                name: 'useremail',
                placeHolder: 'Username or Email',
                allowBlank: false,
		        vtype: 'email',
		        inputType: 'email'
            },  {xtype:'spacer',  style: 'background-color: #EEE; height:20px; border:none;'},  {
                xtype: 'passwordfield',
           
                name: 'password',
                placeHolder: 'Password',
                allowBlank: false
            }, {xtype:'spacer',  style: 'background-color: #EEE; height:20px; border:none;'}, {
                xtype: 'checkboxfield',
                name : 'Remember',
                labelWidth: '80%' ,
                label: 'Remember me',
                value: 'remember'
            },{
                xtype: 'hiddenfield',
                name: 'type',
                value: 'user'
            }]
        }, {
            xtype: 'button',
            text: 'LOGIN',
		    itemId: 'LoginButon',
            ui: 'confirm',
            width: '75px',
			cursor	: 'pointer',
			/*handler: this.onLoginButtonTap*/
            handler: function () {
 }
        }, 
		{
            xtype: 'button',
		    itemId: 'ForgetpassButon',
            text: 'FORGOT YOUR PASSWORD',
            ui: 'confirm',			
			cls:'clsDDLHeader',
            width: '215px',
			cursor	:'pointer',
            handler: function () {
				var indexPanel = Ext.create('MyApp.view.Forgetpass');
				Ext.Viewport.add(indexPanel);
				Ext.Viewport.setActiveItem(indexPanel);
            }
        },
		
		
		{  xtype: 'button',
		    itemId: 'SignupButon',
            text: 'SIGNUP FOR SERVICE SEEKERS ACCOUNT',
            ui: 'confirm',
			cls:'clsDDLHeader',
            width: '250px',
			cursor	: 'pointer',
            handler: function () {
					
				var indexPanel = Ext.create('MyApp.view.Registration');
				Ext.Viewport.add(indexPanel);
				Ext.Viewport.setActiveItem(indexPanel);
            }
        }
        
		]
	}
});

Thanks for giving your valuable time.

Thanks & Regards,
Pradip Kumar

[bricemason]

Thanks for the completed code for the MyAccount class, however the most important part of the equation is where MyAccount is rendered. Based on this snippet from your controller:

onBackTap:function(btn)
{
    var mainNav=btn.up('navigationview');
    mainNav.pop();
}

it looks like you're expecting that MyAccount view to have been pushed onto your navigation. If MyAccount is not a child of a navigation view, you'll get that error.

Brice

[pradipkumar]

Hi,
Please give some sample code regarding on this issue which can help for me.Thanks for your support. If i change my navigation.js file like this:

Ext.define('MyApp.view.Navigation',{ extend:'Ext.NavigationView', xtype:'navigation', requires:['MyApp.view.Main','MyApp.view.Login'], config:{ fullscreen:true, navigationBar:false, items:[ { xtype:'login' }, { xtype:'myaccount' } ] }}); then myaccount page is loading first,when i click the back button then it loading the login page.Please help me on this issue.

Thanks & Regards,
Pradip Kumar

[bricemason]

The code sample you provided here is working as expected. By defining your two items in your navigation view, you're essentially pushing both views at once with the last one getting the final rendering (MyAccount).

Here is an example that will demonstrate how to solve this along with a demonstration on how your original error most likely was triggered.

MyAccount.js:

Ext.define('MyApp.view.MyAccount', {
    extend: 'Ext.form.Panel',
    xtype: 'myaccount',


    config: {
        items: [
            {
                xtype: 'titlebar',
                title: 'Edit Your Profile',
                docked: 'top',
                items: {
                    xtype: 'button',
                    text: 'back',
                    align: 'left'
                }
            }
        ]
    }
});

Main.js (view)

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.navigation.View'
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {
                xtype: 'navigationview',
                title: 'In Nav View',
                navigationBar: false,
                items: [
                    {
                        xtype: 'panel',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Go to My Account',
                                handler: function(btn) {
                                    btn.up('navigationview').push({ xtype: 'myaccount' } );
                                }
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'panel',
                title: 'In Plain Panel',
                items: [
                    {
                        xtype: 'myaccount'
                    }
                ]
            }
        ]
    }
});

Main.js (controller):

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',


    config: {
        control: {
            'titlebar button[text=back]': {
                tap: 'onBackTap'
            }
        }
    },


    onBackTap: function(btn) {
        btn.up('navigationview').pop();
    }
});

My example here is a tab panel. The first tab will demonstrate the successful behavior you desire. That first panel with the button could be like your login panel. On some sort of successful action, the MyAccount view is pushed onto the navigation view. Since this MyAccount instance is now a child of the navigation view, the controller code that listens for that back button tap will work.

The second tab renders the MyAccount view on a plain panel. When an attempt is made to tap that back button, you will see the error. This makes sense because this instance of MyAccount is not a child of a navigation view.

This is an example for demonstration purposes. You should still take a step back and consider whether the navigation view or perhaps a simple container with a card layout is what you really need. Nonetheless, this example works.

Brice