Sencha Touch 2 pie chart not displaying - sencha-touch-2

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'
}]
}
});