Extjs图表选错Store？

Question

我正在尝试并排绘制两个图表，它们将通过传递不同的参数使用同一商店，但两个图表都使用第二个商店的值。我可以在 Chrome 控制台中看到响应，它适用于两个请求和不同的响应；下面是我的代码。

Ext.define('testUtility.view.BarChart', {
  extend: 'Ext.chart.Chart',
  alias: 'widget.barChart',
  renderTo: Ext.getBody(),
  store: Ext.create('Ext.data.Store', {
    fields: ['name', 'data'],
    autoLoad: false,
    proxy: {
      type: 'ajax',
      url: 'data/store1',
      reader: {
        type: 'json',
        root: 'Data'
      },
      filterParam: undefined,
      groupParam: undefined,
      pageParam: undefined,
      startParam: undefined,
      sortParam: undefined,
      limitParam: undefined
    }
  }),
  axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data'],
    label: {
      renderer: Ext.util.Format.numberRenderer('0,0')
    },
    title: 'Values',
    grid: true,
    minimum: 0
  }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Master'
  }],
  series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    tips: {
      trackMouse: true,
      width: 100,
      height: 28,
      renderer: function(storeItem, item) {
        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
      }
    },
    label: {
      display: 'insideEnd',
      'text-anchor': 'middle',
      field: 'data',
      renderer: Ext.util.Format.numberRenderer('0'),
      orientation: 'vertical',
      color: '#333'
    },
    xField: 'name',
    yField: 'data'
  }]
});

app.js

Ext.application({
  requires: [
    'Ext.container.Viewport'
  ],

  name: 'BAR Chart  ',
  launch: function() {

    var chart1 = Ext.create('testUtility.view.BarChart', {
      id: 'chart1',
      height: 300,
      width: '50%'
    });

    var store1 = chart1.getStore();
    store1.proxy.extraParams = {
      id: chart1.id
    };
    store1.load();
    var chart2 = Ext.create('testUtility.view.BarChart', {
      id: 'chart2',
      height: 300,
      width: '50%'
    });

    var store2 = chart2.getStore();
    store2.proxy.extraParams = {
      id: chart2.id
    };
    store2.load();
  }
});

两个图表均显示商店中较晚加载的数据。

Answer 1

当您在定义中称呼它们时，您的两家商店是同一家商店。您应该在创建 class 的实例时调用商店，如下所示：

var chart1 = Ext.create( 'testUtility.view.BarChart', {
    id: 'chart1',
    height: 300,
    width: '50%',
    store: store1
} );

最好定义自己的商店：

Ext.define( 'testUtility.store.BarChart', {
    extend: 'Ext.data.Store',
    ...
} );

然后在代码的第一部分之前使用它：

var store1 = Ext.create( 'testUtility.store.BarChart', { options } );

您的 options 包括额外参数，2 家商店不同。

Extjs图表选错Store？

Extjs chart picking wrong Store?

javascript

model-view-controller

extjs