navigationView.reset(), .pop(), .fireEvent('back') all throw error

[markevans]

REQUIRED INFORMATION

Ext version tested:

• ST 2.2(beta)

Browser versions tested against:

• Chrome

Description:

• navigationView generates error with methods reset(), pop(), fireEvent('back') all generate the error Uncaught TypeError: Cannot call method 'getPageBox' of null. The "back" buttons do work, tho after the error, the labels are thrown off when using title as label.

Steps to reproduce the problem:

• Not sure exactly, but appears to be related to pushing two lists into the same navigationView or using a segmented button to push onto a navigationView.

The result that was expected:

• no error and methods to perform as expected (pop, reset, back).

The result that occurs instead:

• Uncaught TypeError: Cannot call method 'getPageBox' of null.

Test Case:

See this URL for live test case: http://tally.mobyus.com/STShare/Test22b/

• see test case at above link. not compiled.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• MacOS 10.8

[mitchellsimoens]

Have you tried with the RC? Do you have a small test case to post here?

[markevans]

Hey Mitchell - I'll try the RC. I put a link to a small working app that demonstrates the error. Does that work for you?

http://tally.mobyus.com/STShare/Test22b/

[mitchellsimoens]

I know you linked but I need to have it local so I can debug.

[markevans]

I'll post the code here in case helpful - it consists of six views:

Main.js

Ext.define("Test22b.view.Main", {
    extend: 'Ext.tab.Panel',
	xtype: 'mainview',
    requires: [
        //'Ext.TitleBar',
		'Test22b.view.TestNav'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
	            {
	                title: 'TestNav',
	                iconCls: 'team',
					id: 'tabbar_teams',
					xtype: 'container',
					layout: 'fit',


	                items: [
						{
							xtype: 'testnav'
						}
	    				]
					}
				]
			}
});

TestList.js:

Ext.define('Test22b.view.TestList', {
	extend: 'Ext.List',
	xtype: 'testlist',
	
	requires: [
		'Ext.plugin.PullRefresh'
	],
	
	config: {
		variableHeights: false,
		itemHeight: 94,
		plugins: [
		        {
		            xclass: 'Ext.plugin.PullRefresh',
		            pullRefreshText: 'Pull down to refresh...',
					releaseRefreshText: 'Here go we...',
					latestfeteched: function(eOpts) {
							alert('Very refreshing!')
					    }
		        }
		    ],
		itemTpl: '{title}',
		data: [
	        	{ title: 'Pick view1', option: 1 },
	        	{ title: 'Pick nothing', option: 2 }
	    	],
	
	listeners :{
		itemtap: function( list, index, target, record, e, eOpts ) {
			if (index == 0) {
				if (!this.view1) { this.view1 = Ext.create('Test22b.view.TestView'); }
				list.getParent().push(this.view1);
			}
		}
	}
	}
});

TestList2.js:

Ext.define('Test22b.view.TestList2', {
	extend: 'Ext.List',
	xtype: 'testlist2',
	
	requires: [
		'Ext.plugin.PullRefresh'
	],
	
	config: {
		title: 'List2',
		variableHeights: false,
		itemHeight: 94,
		plugins: [
		        {
		            xclass: 'Ext.plugin.PullRefresh',
		            pullRefreshText: 'Pull down to refresh...',
					releaseRefreshText: 'Here go we...',
					latestfeteched: function(eOpts) {
							alert('Very refreshing!')
					    }
		        }
		    ],
		itemTpl: '{title}',
		data: [
	        	{ title: 'Pick view2', option: 1 },
	        	{ title: 'Pick nothing', option: 2 }
	    	],
	
	listeners :{
		itemtap: function( list, index, target, record, e, eOpts ) {
			if (index == 0) {
				if (!this.view2) { this.view2 = Ext.create('Test22b.view.TestView2'); }
				list.getParent().push(this.view2);
			}
		}
	}
	}
});

TestNav.js:

Ext.define('Test22b.view.TestNav', {
    extend: 'Ext.navigation.View',
    xtype: 'testnav',
    requires: [
        'Test22b.view.TestList',
		'Ext.data.Store'
    ],


    config: {
		autoDestroy: false,
		useTitleForBackButtonText: true,
		navigationBar: {
			docked: 'top',
		    
		},
        items: [	
		{
            
			title: 'List1',
            xtype: 'testlist'
            
        }
		]
    },


	    initialize : function(nav, eOpts) {
	        this.callParent(arguments);
			}
});

TestView.js:

Ext.define('Test22b.view.TestView', {
    extend : 'Ext.Container',
    
    xtype : 'testview',
	requires: [ 'Ext.Button', 'Ext.Label', 'Ext.Img', 'Ext.Container', 'Ext.SegmentedButton', 'Ext.ActionSheet' ],


    config : {
		layout: 'vbox',
		height: '100%',
	    showAnimation: 'slideIn',
		hideAnimation: 'slideOut',
		title: 'View1',
		items: [
			{
				xtype: 'container',
				layout: 'hbox',
				items: [
				{
					xtype: 'label',
					style: 'float: left;',
					margin: 10
				}
				]
				
			},
			{	
				xtype: 'container',
				id: 'viewmain',
				margin: 15,
				tpl: '<div style="margin-bottom:10px;"><span style="font-weight:bold;">{view1msg}</span></div>'
			},
			{
				xtype: 'segmentedbutton',
				allowMultiple: false,
				allowDepress: false,
				docked: 'bottom',
				height: '2em',
				margin: '1em',
				items: [
				        {
							text: 'List 2',
							id: 'getList2',
							ui: 'confirm',
							width: '50%',
							listeners: {
								tap: function(button) {
									button.getParent().setPressedButtons( false );
									if (!this.list2) { this.list2 = Ext.create('Test22b.view.TestList2'); }
									Ext.ComponentQuery.query('testnav')[0].push(this.list2);
								}
							}
				        },
				        {
				            iconCls: 'action',
							id: 'calAction',
							iconMask: true,
							ui: 'confirm',
							width: '50%'
				        }
				    ]
			}]
	}
			
});

TestView2.js:

Ext.define('Test22b.view.TestView2', {
    extend : 'Ext.Container',
    
    xtype : 'testview2',
	requires: [ 'Ext.Button', 'Ext.Label', 'Ext.Img', 'Ext.Container', 'Ext.SegmentedButton', 'Ext.ActionSheet' ],


    config : {
		layout: 'vbox',
		height: '100%',
	    showAnimation: 'slideIn',
		hideAnimation: 'slideOut',
		title: 'View2',
		items: [
			{
				html: 'Here\' the body of test view 2'
			},
			{	
				xtype: 'button',
				text: 'Reset Nav',
				docked: 'bottom',
				margin: 20,
				ui: 'action',
				listeners: {
					tap: function(button) {
						Ext.ComponentQuery.query('testnav')[0].reset();
					}
				}
			}]
	}
			
});

[markevans]

Trying with RC. Have downloaded 2.2RC1, updated CMD, recreated my app using this new version. Now I get an error in compass related to a missing pictos-web.woff file. Tried following the instructions from a January posting related the same error in the 22alpha, but still getting the error. Once I spend some more time figuring out how to get this new version to work, I can check to see whether this reset() error is fixed in the RC. Sorry - a bit frustrating.

[markevans]

Hey Mitchell - I loaded the new RC, but now when I run my app, I get an error almost immediately of:

Uncaught TypeError: Object [object Object] has no method 'getDefaultDateFormat'WebStorage.js:426

... so rather than continue to figure out why my app won't run under the new RC, I'll hold off for now. Thanks for your help. Let me know if I can provide anything else to assist with the navview error.

[markevans]

Maybe this is easier? I created a single js file (Main.js view) that generates the error. Let me know what I need to provide or if you have any suggestions for workarounds. Thanks.

Ext.define("Test22b.view.Main", {    extend: 'Ext.tab.Panel',
    xtype: 'mainview',
    requires: [
        'Ext.navigation.View',
        'Ext.dataview.List',
        'Ext.plugin.PullRefresh',
        'Ext.data.Store',
        'Ext.Label',
        'Ext.SegmentedButton'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
                {
                    iconCls: 'team',
                    id: 'tabbar_teams',
                    xtype: 'container',
                    layout: 'fit',


                    items: [
                        
                        ]
                    }
                ],
            listeners:
            {
            initialize: function(view) {
                console.log(view);
                var testnav = Ext.create('Ext.navigation.View', {
                    autoDestroy: false,
                    id: 'testnav',
                    useTitleForBackButtonText: true,
                    navigationBar: {
                        docked: 'top',


                    }
                });
                
                if (!this.testlist) { this.testlist = Ext.create('Ext.List', {
                    title: 'List1',
                    variableHeights: false,
                    itemHeight: 94,
                    plugins: [
                            {
                                xclass: 'Ext.plugin.PullRefresh',
                                pullRefreshText: 'Pull down to refresh...',
                                releaseRefreshText: 'Here go we...',
                                latestfeteched: function(eOpts) {
                                        alert('Very refreshing!')
                                    }
                            }
                        ],
                    itemTpl: '{title}',
                    data: [
                            { title: 'Pick view1', option: 1 },
                            { title: 'Pick nothing', option: 2 }
                        ],


                listeners :{
                    
                    itemtap: function( list, index, target, record, e, eOpts ) {
                        if (index == 0) {
                            if (!this.view1) { 
                            this.view1 = Ext.create('Ext.Container', {
                                layout: 'vbox',
                                height: '100%',
                                showAnimation: 'slideIn',
                                hideAnimation: 'slideOut',
                                title: 'View1',
                                items: [
                                    {
                                        xtype: 'container',
                                        layout: 'hbox',
                                        items: [
                                        {
                                            xtype: 'label',
                                            style: 'float: left;',
                                            margin: 10
                                        }
                                        ]


                                    },
                                    {    
                                        xtype: 'container',
                                        id: 'viewmain',
                                        margin: 15,
                                        tpl: '<div style="margin-bottom:10px;"><span style="font-weight:bold;">{view1msg}</span></div>'
                                    },
                                    {
                                        xtype: 'segmentedbutton',
                                        allowMultiple: false,
                                        allowDepress: false,
                                        docked: 'bottom',
                                        height: '2em',
                                        margin: '1em',
                                        items: [
                                                {
                                                    text: 'List 2',
                                                    id: 'getList2',
                                                    ui: 'confirm',
                                                    width: '50%',
                                                    listeners: {
                                                        tap: function(button) {
                                                            button.getParent().setPressedButtons( false );
                                                            if (!this.list2) { this.list2 = Ext.create('Ext.List', {
                                                                title: 'List2',
                                                                variableHeights: false,
                                                                itemHeight: 94,
                                                                plugins: [
                                                                        {
                                                                            xclass: 'Ext.plugin.PullRefresh',
                                                                            pullRefreshText: 'Pull down to refresh...',
                                                                            releaseRefreshText: 'Here go we...',
                                                                            latestfeteched: function(eOpts) {
                                                                                    alert('Very refreshing!')
                                                                                }
                                                                        }
                                                                    ],
                                                                itemTpl: '{title}',
                                                                data: [
                                                                        { title: 'Pick view2', option: 1 },
                                                                        { title: 'Pick nothing', option: 2 }
                                                                    ],


                                                            listeners :{
                                                                itemtap: function( list, index, target, record, e, eOpts ) {
                                                                    if (index == 0) {
                                                                        if (!this.view2) { this.view2 = Ext.create('Ext.Container', {
                                                                            layout: 'vbox',
                                                                            height: '100%',
                                                                            showAnimation: 'slideIn',
                                                                            hideAnimation: 'slideOut',
                                                                            title: 'View2',
                                                                            items: [
                                                                                {
                                                                                    html: 'Here\' the body of test view 2'
                                                                                },
                                                                                {    
                                                                                    xtype: 'button',
                                                                                    text: 'Reset Nav',
                                                                                    docked: 'bottom',
                                                                                    margin: 20,
                                                                                    ui: 'action',
                                                                                    listeners: {
                                                                                        tap: function(button) {
                                                                                            Ext.ComponentQuery.query('#testnav')[0].reset();
                                                                                        }
                                                                                    }
                                                                                }]
                                                                        }); }
                                                                        Ext.ComponentQuery.query('#testnav')[0].push(this.view2);
                                                                    }
                                                                }
                                                            }
                                                            }); }
                                                            Ext.ComponentQuery.query('#testnav')[0].push(this.list2);
                                                        }
                                                    }
                                                },
                                                {
                                                    iconCls: 'action',
                                                    id: 'calAction',
                                                    iconMask: true,
                                                    ui: 'confirm',
                                                    width: '50%'
                                                }
                                            ]
                                    }]
                            }); }
                            Ext.ComponentQuery.query('#testnav')[0].push(this.view1);
                        }
                    }
                }
                });
                }
                testnav.add(this.testlist);
                Ext.ComponentQuery.query('#tabbar_teams')[0].add(testnav);
                //view.add(testnav);
            
            }}}
});

[markevans]

Mitchell, as you suggested earlier, I've tried running my app under 2.2.0 RC (after I got load() and sync() working.)

Sorry to report that the error still appears.

[markevans]

Appears to involve any method that traverses more than 2 "back" in the navigationView.

In other words, pop(2) is working. pop(3) is not.