Using NavigationView in Sencha Touch 2

Question

I'm experimenting with Sencha Touch 2 and ran into a problem with the NavigationView, because it won't work... Everytime I try to push a view I get the error Uncaught TypeError: Cannot call method 'apply' of undefined and I don't know why...

If I initialize the first view inside the config-part of the navigation view it works fine, but if I try to push the exact same view into the NavigationView I get the error...

Here's some code of my views and controller:

The Controller:

Ext.define('svmobile.controller.MyController', {
    extend: 'Ext.app.Controller',
    alias: 'widget.mycontroller',

    config: {
        refs: {
            mainView:   'main',
        }
    },

    launch: function() {
        this.callParent(arguments);
        Ext.Viewport.add(Ext.create('svmobile.view.Main'));
        this.getMainView().getNavigationBar().add(
            {
                xtype: 'navbutton',
                align: 'right'
            }
        );

        this.getMainView().push(       //This is not working
            {
                xtype: 'hostspie'
            }
        );
    },
...

The NavigationView:

Ext.define('svmobile.view.Main', {
    extend: 'Ext.navigation.View',
    xtype: 'main',
    alias: 'widget.main',

    config: {
        items: {               //This way it works
            xtype: 'hostspie'
        }
    }
});

The view to push:

Ext.define('modules.nagios.view.HostsPie', {
    extend: 'Ext.Panel',
    alias: 'widget.hostspie',

    requires: [
        ...
    ],

    config: {
        layout: 'fit',
        title: 'Dashboard',

        items: [
            {
                xtype: 'polar',
                ...
            }
        ]
    }
});

Any ideas why it is not working as it should?

Try to do console.log(this.getMainView().getNavigationBar()) and see if this is coming as object or undefined — ThinkFloyd
Both this.getMainView().getNavigationBar() and this.getMainView() coming as an object... — pyriand3r
Still on that problem. I found out that the object is in fact added to the view, but do not show up. It is listed in the object-data under innerItems and items. Funny thing: the button-add to the navigation bar works, maybe i have to go deeper in the view-object to push a new view? — pyriand3r
Try giving some fixed width and height and see if it is visible then. Also if you can see it in DOM, can you check CSS and see why is it not visible? — ThinkFloyd
Try to comment out all possible callbacks in your controller. If you have defined callback function, but you don't have it implemented, this can happen. — gradosevic

Michael Michael · Accepted Answer · 2012-12-23T10:14:57

Did you try to define

Ext.define('modules.nagios.view.HostsPie', {
extend: 'Ext.Panel',
alias: 'widget.hostspie',

xtype: 'hostspie',

?

Using NavigationView in Sencha Touch 2

2 Answers