如何在Panel內調用Ext.Define類？

Question

我是Ext.js的新手，想要弄清楚基本結構。無論如何，我想用線型圖在面板內部，但我得到這個錯誤：

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

，這裏是我的主類，這是試圖調用面板內該圖表的一部分：

{ 
      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' 
     } 
    }