ExtJs 4.0图表访问sevlet

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.require(['Ext.data.*']);

Ext.onReady(function() {

   Ext.Loader.setConfig({
      enabled : true
     });
   Ext.define("stat", {
      extend : "Ext.data.Model",
      fields : [{
         name : 'name'
        }, {
         name : 'data1'
        },{
         name : 'data2'
        }],
      proxy : {
       type : 'memory'
      }
     });
     var store1 = new Ext.data.Store({
      proxy:{
        type:'ajax',
        url:'http://localhost:8080/AutoFactDesk/servlet/ChartsServlet'
        },
     
      model : 'stat'
    //  autoLoad : true
     });
    store1.load();
     /*
     store1.load(function(records,operation,success){
        Ext.Array.each(records,function(model){
             alert(model.get('name'));
            
             });
     });
     */

//use a renderer for values in the data view.
    function perc(v) {
        return v + '%';
    }
 
    var panel3 = Ext.create('widget.panel', {
        width: 600,
        height: 300,
        renderTo:'chart1',
        border:false,
        layout: 'fit',
        items: {
            xtype: 'chart',
            animate: false,
            store: store1,
            insetPadding: 30,
            gradients: [{
              angle: 90,
              id: 'bar-gradient',
              stops: {
                  0: {
                      color: '#99BBE8'
                  },
                  70: {
                      color: '#77AECE'
                  },
                  100: {
                      color: '#77AECE'
                  }
              }
            }],
            axes: [{
                type: 'Numeric',
                minimum: 0,
                maximum: 100,
                position: 'left',
                fields: ['data1'],
                title: false,
                grid: true,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0'),
                    font: '10px Arial'
                }
            }, {
                type: 'Numeric',
                minimum: 0,
                maximum: 100,
                position: 'right',
                fields: ['data2'],
                title: false,
                grid: true,
                label: {
                    renderer: perc,
                    font: '10px Arial'
                }
            },{
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: false,
                grid: true,
                label: {
                    font: '11px Arial',
                    renderer: function(name) {
                        return name.substr(0, 3);
                    }
                }
            }],
            series: [{
                type: 'column',
                axis: 'left',
                xField: 'name',
                yField: 'data1',
                highlight: true,
               label: {
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                   field: 'data1',
                   renderer: Ext.util.Format.numberRenderer('0'),
                   orientation: 'vertical',
                   color: '#333'
                },
                style: {
                    fill: 'url(#bar-gradient)',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
                }
            }, {
                type: 'line',
                axis: 'left',
                xField: 'name',
                yField: 'data2',
                highlight: { 
                  size: 5,
                  radius: 5
                },
                tips: {
                    trackMouse: true,
                    width: 110,
                    height: 25,
                    renderer: function(storeItem, item) {
                        var str='';
                        var data=perc(storeItem.get('data2'));
                        //this.setTitle(storeItem.get('data2') + ' visits in ' + storeItem.get('name').substr(0, 3));
                        var month=storeItem.get('name').substr(0, 3);
                        str=str+data+' in  '+month;
                        this.setTitle(str);
                    }
                },
                style: {
                    fill: '#38B8BF',
                    stroke: '#38B8BF',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
                }
            }]
        }
    });
});