如何在Panel中调用Ext.Define class？

Question

我是 Ext.js 的新手，正在尝试了解基本结构。无论如何，我想在面板内使用 LineChart，但出现此错误：

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

我从 http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#line-basic 找到了这段代码。这是折线图代码：

 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();
    }
});

这是我的主要 class 的一部分，它试图在面板内调用此图表：

{
             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()
            })


         }

请帮我找出我做错了什么。希望我能解释清楚。感谢您的帮助。

Answer 1

您可以像这样使用 xtype：

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

如何在Panel中调用Ext.Define class？

How to call Ext.Define class inside Panel?

javascript

extjs