1

我决定使用 Extjs 4 MVC 架构，因为我不是程序员，而且我觉得它很容易理解。我正在使用 Extjs 4 和 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 的包装器（来自这里： ExtJS 4 中的股票图表）：

Ext.define('BC.view.chart.Flot',  {
 extend: 'Ext.Component',
 alias: 'widget.flot',

 /**
  * @cfg {number[][]} data The data to be drawn when it gets rendered
  */
 data: null,

 /**
  * @cfg {object} flotOptions
  * The options to be passed in to $.plot
  */
 flotOptions: null,

 /**
  * @property
  * The Flot object used to render the chart and to manipulate it in the future. It    will only
  * be available after the first resize event
  * You may not set this property but you are free to call methods on it
  */
 flot: null,

 initComponent: function (rerenderGraph) {
     this.callParent(arguments);
     // The only time that we're guaranteed to have dimensions is after the first resize event
     this.on('resize',  function(comp) {
         if (!this.flot) {
             this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions);
         } else {
             // Flot knows to look at the containers size and resize itself
             this.flot.resize();
         }
     }, this);
 } });

下面是控制器。关键部分是“数据”字段。当我直接将上述 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 文档（http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json）时，我正在阅读它，以便商店返回 json 文件的确切内容，您应该将存储中的 json 代理指向模型名称（BC.model.Chart - 见上文）。

很明显，没有将正确的数据格式传递给 Flot 图表。我希望有人可以帮助我解决这个问题。另外，我很好奇如何找出哪些数据正在通过存储传递到 Flot 包装器，以便我可以更轻松地进行故障排除。使用 Firebug 没有其他明显的错误。

4

0 回答 0