extjs Store & View Chart Example

EXT JS is not the greatest documented framework i have used, therefore here is a example of a Ext.Chart with a data store.

Firstly declare a Store with a proxy to your data. In this case my web service getGraphData  is returning a list of string& int objects.

Ext.define("extjs.store.GraphData",{
  extend: 'Ext.data.Store',
  autoLoad: true,
  storeId: 'graphData',
  proxy: new Ext.data.HttpProxy({
 extraParams: {projectID: 0},
    type: 'ajax',
    url: 'http://localhost:9000/GraphService.asmx/getGraphData',
    headers: {'Content-Type' : 'application/json'},                            
    reader: {
      type: 'json',                                        
      root: 'd'
    },  
  }),
       fields: ['type', 'number']
});

Next declare the the graph as below:

Ext.define('extjs.view.graph.GraphPanel', {
  extend: 'Ext.chart.Chart',
  requires:['extjs.store.GraphData'],
    alias:'widget.graphpanel',
     width: 200,
     height: 150,
     store:'graphData',
      items: [{
      type  : 'text',
      text  : 'Status Summary',
     // font  : '14px Arial',
      width : 100,
      height: 50,
      x : 50, //the sprite x position
      y : 5  //the sprite y position
   }],
     series:[
     {
       type: 'pie',
       field: 'number',
       colorSet:['#d9534f','#1E82CC','#F3F781'],
       label: {
         field: 'type',
         display: 'Type',
         font: '12px Arial'
       }
     }],
        constructor: function(config) {
        this.initConfig(config);
        Ext.create('extjs.store.GraphData');
        this.callParent(arguments);
      }
  });



The result: