я пытаюсь сделать пример Spie в Ext JS 5, но это не сработало

Вот мой код, я не знаю, почему он не работает. Ошибка в консоли

 [W] [Ext.Loader] Synchronously loading 'widget.polar'; consider adding Ext.require('widget.polar') above Ext.onReady Util.js?_dc=1404383474396:692

        GET http://localhost/widget/polar.js?_dc=1404383480019 404 (Not Found) bootstrap.js:558

        Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.polar ClassManager.js?_dc=1404383474396:1405
        [E] [Ext.Loader] Some requested files failed to load. Util.js?_dc=1404383474396:692

        Object
         Util.js?_dc=1404383474396:698
        console.trace() Util.js?_dc=1404383474396:704
        log Util.js?_dc=1404383474396:704
        Ext.apply.raise Error.js?_dc=1404383474396:186
        Ext.apply.onLoadFailure Loader.js?_dc=1404383474396:649
        (anonymous function) bootstrap.js:728

        Uncaught Error: [Ext.Loader] Some requested files failed to load. Error.js?_dc=1404383474396:103

я просто пытаюсь создать шпиона, как в примере: http://dev.sencha.com/ext/5.0.0/examples/kitchensink/?charts=true#pie-custom

Ext.define('App.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: 'App.view.main.TabPanel',
        xtype: 'app-main',

        controller: 'main',
        viewModel: {
            type: 'main'
        },

        layout: {
            type: 'border'
        },

        items: [
            {
            region: 'center',
            xtype: 'customtabpanel'
        }]
    });

и введите его в мою вкладку .... я не знаю, почему не работает

 app/view/main/TabPanel.js

Ext.define('App.view.main.TabPanel', {
    extend: 'Ext.tab.Panel',
      xtype: 'customtabpanel',
     requires:['App.view.main.Pie'],
    ui: 'navigation',
    tabPosition: 'left',
    tabRotation: 0,

    tabBar: {
        border: false
    },

    items: [{
        title: 'Active Tab 1',
        html: 'Active Link One',

     xtype: 'pie-custom',
    }, {
        title: 'Active Tab 2',
        html: 'Active Link Two'
    }, {
        title: 'Active Tab 3',
        html: 'Active Link Three'
    }, {
        title: 'Active Tab 4',
        html: 'Active Link Four'
    }]
});




 app/view/main/Pie.js

Ext.define('App.view.main.Pie', {
    extend: 'Ext.Panel',
    xtype: 'pie-custom',


    // <example>

    bodyStyle: 'background: transparent !important',
    layout: {
        type: 'vbox',
        pack: 'center'
    },
    // </example>

    width: 650,

    initComponent: function() {
        var me = this;
        //<example>
        me.tbar = [
            '->',
            {
                text: 'Preview',
                handler: function() {
                    me.down('polar').preview();
                }
            }
        ];
        //</example>

        me.items = [{
            xtype: 'polar',
            width: '100%',
            height: 500,
            store: {type: 'device-market-share'},
            insetPadding: 30,
            innerPadding: 20,
            legend: {
                docked: 'bottom'
            },
            interactions: ['rotate', 'itemhighlight'],
            sprites: [{
                type: 'text',
                text: 'Pie Charts - Custom Slice Sizing',
                font: '22px Helvetica',
                width: 100,
                height: 30,
                x: 40, // the sprite x position
                y: 20  // the sprite y position
            }, {
                type: 'text',
                text: 'Data: IDC Predictions - 2017',
                font: '10px Helvetica',
                x: 12,
                y: 425
            }, {
                type: 'text',
                text: 'Source: Internet',
                font: '10px Helvetica',
                x: 12,
                y: 435
            }],
            series: [{
                type: 'pie',
                animation: {easing: 'easeOut', duration: 500},
                angleField: 'data1',  // bind angle span to visits
                lengthField: 'data2', // bind pie slice length to views
                clockwise: false,
                highlight: {
                    margin: 20
                },
                label: {
                    field: 'os',        // bind label text to name
                    display: 'outside',
                    font: '14px Arial'
                },
                style: {
                    strokeStyle: 'white',
                    lineWidth: 1
                },
                tooltip: {
                    trackMouse: true,
                    renderer: function(storeItem, item) {
                        this.setHtml(storeItem.get('os') + ': ' + storeItem.get('data1') + '%');
                    }
                }
            }]
        //<example>
        }, {
            style: 'padding-top: 10px;',
            xtype: 'gridpanel',
            columns : {
                defaults: {
                    sortable: false,
                    menuDisabled: true
                },
                items: [
                    { text: 'OS', dataIndex: 'os' },
                    { text: 'Market Share', dataIndex: 'data1', width: 150, renderer: function(v) { return v + '%'; } },
                    { text: 'Growth', dataIndex: 'data2', width: 150, renderer: function(v) { return v + '%'; } }
                ]
            },
            store: {type: 'device-market-share'},
            width: '100%'
        //</example>
        }];

        this.callParent();
    }
});

вы можете мне помочь, почему эта ошибка происходит ???