Extjs图表选择错误商店？

Question

I am trying to draw two charts side by side which will use same store by passing different parameters but both charts are using second store's value. I can see response in Chrome console, it is proper with two requests and different response; below is my code.

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();
  }
});

Both charts shows data from store whichever is loaded later.

Answer 1

Both of your stores are one and the same, when you call them in your definition. You should call the store when creating the instance of the class like so:

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

It is good practice to define your own store:

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

And then just use it before the first part of the code:

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

Your options including the extraparams, different for the 2 stores.