How to call Ext.Define class inside Panel?

Question

I am new on Ext.js and trying to figure out basic structure. Anyway, I want to use LineChart inside the Panel, but I am getting this error:

**Uncaught Error: [Ext.create] Unrecognized class name / alias: BasicChart**

I found this code from http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#line-basic . and here is the LineChart code:

 Ext.define('BasicChart', {
    extend: 'Ext.Panel',
    xtype: 'basic-line',
    requires:[
        'Ext.chart.Chart',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category'],


    initComponent: function() {
        var me = this;

        this.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['month', 'data1' ],
            data: [
                { month: 'Jan', data1: 20 },
                { month: 'Feb', data1: 20 },
                { month: 'Mar', data1: 19 },
                { month: 'Apr', data1: 18 },
                { month: 'May', data1: 18 },
                { month: 'Jun', data1: 17 },
                { month: 'Jul', data1: 16 },
                { month: 'Aug', data1: 16 },
                { month: 'Sep', data1: 16 },
                { month: 'Oct', data1: 16 },
                { month: 'Nov', data1: 15 },
                { month: 'Dec', data1: 15 }
            ]
        });


        me.items = [{
            xtype: 'chart',
            width: '100%',
            height: 410,
            padding: '10 0 0 0',
            style: {
                'background' : '#fff'
            },
            animate: true,
            shadow: false,
            store: this.myDataStore,
            insetPadding: 40,
            items: [{
                type  : 'text',
                text  : 'Line Charts - Basic Line',
                font  : '22px Helvetica',
                width : 100,
                height: 30,
                x : 40, //the sprite x position
                y : 12  //the sprite y position
            }, {
                type: 'text',
                text: 'Data: Browser Stats 2012',
                font: '10px Helvetica',
                x: 12,
                y: 380
            }, {
                type: 'text',
                text: 'Source: http://www.w3schools.com/',
                font: '10px Helvetica',
                x: 12,
                y: 390
            }],
            axes: [{
                type: 'Numeric',
                fields: 'data1',
                position: 'left',
                grid: true,
                minimum: 0,
                label: {
                    renderer: function(v) { return v + '%'; }
                }
            }, {
                type: 'Category',
                fields: 'month',
                position: 'bottom',
                grid: true,
                label: {
                    rotate: {
                        degrees: -45
                    }
                }
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'month',
                yField: 'data1',
                style: {
                    'stroke-width': 4
                },
                markerConfig: {
                    radius: 4
                },
                highlight: {
                    fill: '#000',
                    radius: 5,
                    'stroke-width': 2,
                    stroke: '#fff'
                },
                tips: {
                    trackMouse: true,
                    style: 'background: #FFF',
                    height: 20,
                    showDelay: 0,
                    dismissDelay: 0,
                    hideDelay: 0,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('month') + ': ' + storeItem.get('data1') + '%');
                    }
                }
            }]
        }];

        this.callParent();
    }
});

and here is the part of my main class, which is trying to call this chart inside the panel :

{
             xtype: 'panel',
             width: 1000,
             height: 1000,
             autoScroll: true,
             bodyPadding: 10,
             title:'Billing Graphs',
             margin: '10 5 0 5',
             colspan:2,
             items: Ext.create('BasicChart', {
             renderTo: Ext.getBody()
            })


         }

Please help me find what I am doing wrong with it. Hope I could explain well. Thanks for any help.

Answer 1

You can use the xtype like this:

{
         xtype: 'panel',
         width: 1000,
         height: 1000,
         autoScroll: true,
         bodyPadding: 10,
         title:'Billing Graphs',
         margin: '10 5 0 5',
         colspan:2,
         items: {
           xtype: 'basic-line'
         }
     }