Extjs圖表選擇錯誤商店？

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

當您在定義中調用它們時，兩家商店都是同一家。 創建類的實例時應調用存儲，如下所示：

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包括Extraparams，這對於2家商店而言是不同的。