ExtJS: How to render chart correctly?

544 Views Asked by At

I have a custom Panel and Chart in it, Search gridPanel and Controller to check click on Search raw. Controller that i use collects information on click from gridPanel raw and writes it in the store. After click on raw, information loads into store, i know its done well, because of console.log answer of store.load() and it shows me all data i need to use, but the Chart does not want to be displayed. Here's the snippets:

Controller:

    this.control({
            'Search': {  //gridPanel component where we check information
                selectionchange: this.SearchSelectionChange
            }
        });
    },

    SearchSelectionChange: function(arg, records) {

        if (records.length > 0) {

            var me = this;
            var record = records[0];
            me.code = record.data.dataset_code; //getting code from raw

                me.store = Ext.create('Project.store.MarketDataStore'); //loading our store
                me.store.getProxy().extraParams = {
                    code: me.code  //applying code that we got from Search grid for MarketDataStore
                };
                me.store.load(function(records, success, options){ 
                console.log(records); // shows me all data i want, it working correctly 
                    if(records == null){Ext.Msg.alert('Error', 'Error');} 
                });

            var chart = Ext.create('Project.view.Chart'); //Now i think Chart must be loaded?
            chart.redraw(); //after this still no data in chart
    }

Panel: (Chart preloads on page render)

    Ext.define('Project.view.Panel', {
          extend: 'Ext.panel.Panel',
          requires: 'Project.view.Chart',
          alias: 'widget.ChartPanel',
          autoShow: true,
          layout: 'fit',
          items: [{
            xtype: 'ProjectChart'
          }]
    });

And a piece of Chart component:(series and axes are good, checked on hardcoded data)

    Ext.define('Project.view.Chart', {
    requires:    ['Ext.chart.axis.Category','Ext.chart.axis.Numeric','Ext.chart.series.Line','Ext.util.Point', 'Project.store.MarketDataStore'],
    extend: 'Ext.chart.Chart',
    alias: 'widget.ProjectChart',
      store: 'MarketDataStore',
    storeId: 'сhart',
    renderTo: Ext.getBody(),
    animate: true,
    autoShow: true,

Checked on minified version of Chart application with hardcoded data in store and chart loads well. The main question: How to load/reload/redraw Chart with data correctly from the store?

0

There are 0 best solutions below