title: Can't get jSon dataStore into ExtJS (Sencha Touch) chart: displays error "cannot read property 'length' of undefined"
body: <p><strong>EDITED</strong>
  I am using Sencha touch charts sample provided for column charts. The code is as below</p>
  
  <pre><code>new Ext.chart.Panel({
      fullscreen: true,
      title: 'Column Chart',
      dockedItems: [{
          xtype: 'button',
              iconCls: 'help',
              iconMask: true,
              ui: 'plain',
              handler: onHelpTap
          }, {
              xtype: 'button',
              iconCls: 'shuffle',
              iconMask: true,
              ui: 'plain',
              handler: onRefreshTap
          }],
          items: {
              cls: 'column1',
              animate: {
                  easing: 'bounceOut',
                  duration: 750
              },
              store: window.store1,
              shadow: false,
              gradients: [{
                  'id': 'v-1',
                  'angle': 0,
                  stops: {
                      0: {
                          color: 'rgb(212, 40, 40)'
                      },
                      100: {
                          color: 'rgb(117, 14, 14)'
                      }
                  }
              },
              {
                  'id': 'v-2',
                  'angle': 0,
                  stops: {
                      0: {
                          color: 'rgb(180, 216, 42)'
                      },
                      100: {
                          color: 'rgb(94, 114, 13)'
                      }
                  }
              },
              {
                  'id': 'v-3',
                  'angle': 0,
                  stops: {
                      0: {
                          color: 'rgb(43, 221, 115)'
                      },
                      100: {
                          color: 'rgb(14, 117, 56)'
                      }
                  }
              },
              {
                  'id': 'v-4',
                  'angle': 0,
                  stops: {
                      0: {
                          color: 'rgb(45, 117, 226)'
                      },
                      100: {
                          color: 'rgb(14, 56, 117)'
                      }
                  }
              },
              {
                  'id': 'v-5',
                  'angle': 0,
                  stops: {
                      0: {
                          color: 'rgb(187, 45, 222)'
                      },
                      100: {
                          color: 'rgb(85, 10, 103)'
                      }
                  }
              }],
              axes: [{
                  type: 'Numeric',
                  position: 'left',
                  fields: ['wins'],
                  minimum: 0,
                  maximum: 10,
                  label: {
                      renderer: function (v) {
                          return v.toFixed(0);
                      }
                  },
                  title: 'Wins'
              },
              {
                  type: 'Category',
                  position: 'bottom',
                  fields: ['School'],
                  title: 'School'
              }],
              series: [{
                  type: 'column',
                  axis: 'left',
                  highlight: true,
                  renderer: function (sprite, storeItem, barAttr, i, store) {
                      barAttr.fill = colors[i % colors.length];
                      return barAttr;
                  },
                  label: {
                      field: 'wins'
                  },
                  xField: 'School',
                  yField: 'wins'
              }],
              interactions: [{
                  type: 'panzoom',
                  axes: ['bottom']
              }]
          }
      });
  
  }
  </code></pre>
  
  <p><strong>EDITED:</strong> 
  I am now able to load the json data when I check this in the debugger but my chart is still not getting displayed. Here is my updated code</p>
  
  <pre><code>Ext.regModel('Details', { fields: [{ name: 'School' }, { name: 'wins'}] });
  
  // create the Data Store
  window.store1 = new Ext.data.Store({
      model: 'Details',
      proxy: {
          type: 'scripttag',
          url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset',
          reader: {
              root: 'data',
              type: 'json'
          }
      },
      autoLoad: true
  });
  </code></pre>
  
  <p>appreciate if anyone could let me know if I am doing anything wrong. </p>
  
  <p><strong>OLD POST:</strong> 
  I am using a json output to bind to my Sencha Column chart. My code is as belows - </p>
  
  <pre><code>Ext.regModel('details', { idProperty: 'name', fields: ['School', 'wins'] });
  // create the Data Store
  window.store1 = new Ext.data.Store({
      model: 'details',
      autoLoad: true,
      proxy: {
          type: 'ajax',
          method: 'POST',
          url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset',
          reader: {
              type: 'json',
              root: 'data'
          }
      },
      listeners: {
          load: function (obj, records) {
              Ext.each(records, function (rec) {
                  console.log(rec.get('name'));
              });
          }
      } 
  });
  </code></pre>
  
  <p>This is the json data that is returned from the url</p>
  
  <pre><code>{
     data: [
         {School:'Dukes',wins:'3'},
         {School:'Emmaus',wins:'10'},
         {School:'Maryland',wins:'5'},
         {School:'Virginia',wins:'2'}
     ]
  }
  </code></pre>
  
  <p>But this doesn't display the graph instead I get a javascript error "Uncaught type error: Cannot read property lenght of undefined" in sencha-touch.js file.</p>
  
  <p>If i hard code the data from the json output directly then it works </p>
  
  <pre><code>window.store1 = new Ext.data.JsonStore({
      root: 'data',
      fields: ['School', 'wins'],
      autoLoad: true,
      data: [
          {School:'Dukes',wins:'3'},
          {School:'Emmaus',wins:'10'},
          {School:'Maryland',wins:'5'},
          {School:'Virginia',wins:'2'}
      ]
  });
  </code></pre>
  
  <p>Also when I load the jsonStore from the ExtDesigner it works fine. When I copy the same code in my Secha charts index.js file it doesn't work. </p>
  
  <p>Can someone please let me know what I am doing wrong in my code?</p>