Sencha Touch 2 pie chart not displaying

Question

I am attempting to follow this example for creating a pie chart.

I added some simple code to create and dock a toolbar to the top of the view but still using the code from the example linked above. Doing this made the chart not display. I just get a blank page.

My code is pasted below:

        Ext.define('RevivalTimes.view.Chart', {
            extend: 'Ext.chart.PolarChart',
            xtype: 'chart',

            requires: [
                'Ext.chart.series.Pie',
                'Ext.chart.interactions.Rotate'
            ],

            config: {
                title: 'Statistics',
                iconCls: 'settings',

                layout: 'fit',

/**************** This toolbar causes the second error - disappearing chart **************/
                items: [{
                    docked: 'top',
                    xtype: 'toolbar',
                    title: 'Statistics Chart',
                    items :[
                        {
                            align : 'left',
                            name : 'nav_btn',
                            iconCls : 'list',
                            iconMask: true,
                            ui : 'plain',
                        },
                        {
                            align : 'right',
                            name : 'user_btn',
                            iconCls : 'user',
                            iconMask: true,
                            ui : 'plain',
                        }
                    ]
                }],
    /**********************************************************************/

                animate: true,
                interactions: ['rotate'],
                colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],
                store: {
                  fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                  data: [
                      {name: 'metric one',   data1: 10, data2: 12, data3: 14, data4: 8,  data5: 13},
                      {name: 'metric two',   data1: 7,  data2: 8,  data3: 16, data4: 10, data5: 3},
                      {name: 'metric three', data1: 5,  data2: 2,  data3: 14, data4: 12, data5: 7},
                      {name: 'metric four',  data1: 2,  data2: 14, data3: 6,  data4: 1,  data5: 23},
                      {name: 'metric five',  data1: 27, data2: 38, data3: 36, data4: 13, data5: 33}
                  ]
                },
                series: [{
                    type: 'pie',
                    label: {
                        field: 'name',
                        display: 'rotate'
                    },
                    xField: 'data3',
                    donut: 30
                }]

            } //config
        });

When I visit the chart view, I get the following error:

Uncaught TypeError: Object [object Object] has no method 'renderFrame'

UPDATE:

I should explain I am not using the default tabbar for navigation. I implemented a slide navigation by following this tutorial.

I am using the following controller code to switch views:

    Ext.define('RevivalTimes.controller.Navigation', {
    extend: 'Ext.app.Controller',

    config: {

        refs: {
            main: 'main',
            navigation : 'navigation',
        },

        control: {
            "button[name='nav_btn']": {
                tap: 'toggleNav'
            },
            navigation : {
                itemtap : function(list, index, target, record){
                    this.toggleNav();

                    // console.debug('LIST: ' + list);
                    // console.log('INDEX: ' + index);
                    // console.error('TARGET: ' + target.toSource());
                    // console.warn('RECORD: ' + record);

                    // JSON.stringify(target);

                    switch(index){
                        case 0: 
                            this.getMain().setActiveItem(0);
                            break;
                        case 1: 
                            this.getMain().setActiveItem({xtype:'messagesview'});
                            break;
                        case 2:
                            this.getMain().setActiveItem({xtype:'articleslistview'});
                            break;
                        case 3:
                            this.getMain().setActiveItem({xtype:'categoriesview'});
                            break;
                        case 4:
                            // this.getMain().setActiveItem({xtype:'chart'});
                            this.getMain().setActiveItem({xtype:'chartcontainer'});
                            break;
                        default:
                            break;
                    }
                }
            }
        }

    },

    toggleNav: function(){
        // console.log('responding!');
        var me = this;
        mainEl = me.getMain().element;

        if (mainEl.hasCls('out')) {
            mainEl.removeCls('out').addCls('in'); 
            me.getMain().setMasked(false);
        } else {
            mainEl.removeCls('in').addCls('out');  
            me.getMain().setMasked(true);
        }
    }

});

When I select the last option on my slide navigation, the view changes successfully but the pie chart fails to load as explained above.

Answer 1

Try this:-

Ext.define('RevivalTimes.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',       
    config: {
        layout: 'fit',
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Statistics Chart',
            items :[
            {
                align : 'left',
                name : 'nav_btn',
                iconCls : 'list',
                iconMask: true,
                ui : 'plain'
            },
            {
                align : 'right',
                name : 'user_btn',
                iconCls : 'user',
                iconMask: true,
                ui : 'plain'
            }
            ]
        },{
            xtype: 'chart'
        }]
    }
});