Jquery 使用MVC将JSON数据实时发送到ExtJS4中的Flot面板

我决定使用ExtJS4MVC架构，因为我不是程序员，我发现它很容易理解。我使用ExtJS4和jquery Flot库来显示和记录来自连接到串行端口的arduino的传感器数据。我目前有一个脚本，可以将传感器数据写入json文件

这是我的app.js

 Ext.Loader.setConfig({ enabled: true }); 
 Ext.application({

 requires: ['BC.view.chart.Chart', 'Ext.layout.container.Border', 'BC.view.chart.Flot'],

name: 'BC',
    appFolder: 'app',
controllers: ['Chart'], 

launch: function() {
    Ext.create('Ext.container.Viewport', {
        defaults: {
    collapsible: false,     
    bodyStyle: 'padding:15px'
},
    layout: 'border',
    items: [{
        title: 'Navigation',
        preventHeader: 'true',
        region:'west',
        margins: '5 0 0 0',
        cmargins: '5 5 0 0',
        width: 150,
},{
          region : "center",
          title : "Center Region",
          preventHeader: 'true',
          layout: 'fit',   
          collapsible: false,
          xtype : "tabpanel",
          defaults: {bodyStyle: 'padding: 10px;'},
              items : [        {
                  xtype: 'chart',
                  title: 'Chart'
                  }, {
                xtype: 'panel',
                title: 'Tab2',
                html : 'Content will go here'                     
              },{
                xtype: 'panel',
                title: 'Tab 3',
                html : 'Content will go here',                     
              }],
              activeTab : 0
      }
]
    });
   }
});

这是我的JSON数据：

{"data": [[1354653278712.012, 187.0], [1354653279619.884, 173.0], [1354653280619.664, 163.0], [1354653281619.913, 155.0]], "label": "Temp1"},{"data": [[1354653278712.041, 368.0], [1354653279619.907, 343.0], [1354653280619.749, 325.0], [1354653281619.938, 311.0]], "label": "Temp2"} 

模型如下：

Ext.define('BC.model.Chart', {
    extend: 'Ext.data.Model',
    fields: ['data', 'label']
});

这是商店：

Ext.define('BC.store.Chart', {
    extend: 'Ext.data.Store',
    model: 'BC.model.Chart',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            model: 'BC.model.Chart'
        }
    }  
});

这是控制器：

Ext.define('BC.controller.Chart', {
    extend: 'Ext.app.Controller',

    stores: ['Chart'],
    models: ['Chart']    
    });

这是Flot的包装（从这里：）：

以下是控制器。关键部分是“数据”字段。当我直接将上面的JSON数据粘贴到括号（[]）之间时，图表运行良好。但是，按照下面当前设置的方式（['store']），我无法获得要显示的数据，我得到了一个空白的Flot图表。我认为这仅仅是因为正确的数据格式没有被传递到Flot图表

Ext.define('BC.view.chart.Chart', {
   extend: 'Ext.panel.Panel',
   alias: 'widget.chart',

   name: 'Chart',
   layout: 'fit',
   store: 'Chart',


   items: [{
       xtype : "flot",
       data:  ['store']
   }]

});  

在阅读Extjs文档（）时，为了让存储返回json文件的确切内容，假设您将存储中的json代理指向模型名（BC.model.Chart-见上文）

很明显，正确的数据格式没有传递到Flot图表。我希望有人能帮我解决这个问题。此外，我还想知道如何找出哪些数据正在通过存储区传递到Flot包装器，以便我能够更轻松地进行故障排除。我在使用Firebug时没有发现其他明显的错误

Ext.define('BC.view.chart.Chart', {
   extend: 'Ext.panel.Panel',
   alias: 'widget.chart',

   name: 'Chart',
   layout: 'fit',
   store: 'Chart',


   items: [{
       xtype : "flot",
       data:  ['store']
   }]

});