Update Chart when add/remove records Ext JS

Question

ExtJS 7.0 Modern The records of the chart change when editing grid cells but not when I add/remove rows. i have tried store.sync(), store.update(), .load() in the controler page and none of this seams to be working. here is the block where i tried to put the logic. (everything works fine exept the sync with chart)

showChart: function(btn){
    var chart = Ext.create({
        xtype: 'kleachart'

    }) ;
    chart.show() ;
    console.log("CHART",chart) ;
},

https://fiddle.sencha.com/#view/editor&fiddle/2vh0

Thanx in advance!

Answer 1

The problem is multiple instance of stores. When you create new instance of kleachart (also viewModel instance there) - new instance of store will be created.

showChart: function (btn) {
    var store = this.getView().getStore();
    //model = store.getRecordModel();
    console.log("STORE", store);

    // store = this.getView().getStore().getData();
    // here your logic (see at "reloadStore")
    var chart = Ext.create({
        xtype: 'kleachart',
        title: 'Hello',
        // handler: function (btn) {
        //    store.sync();
        // }

    });

    chart.show();

    console.log("CHART", chart);

}

You can reference to old store like that:

showChart: function (btn) {
    var store = this.getView().getStore(),
        parentViewModel = this.getViewModel();
    var chart = Ext.create({
        xtype: 'kleachart',
        title: 'Hello',
        viewModel: new Ext.app.ViewModel({
            stores: {
                klea: store
            }
         })
    });
    chart.show();
},

Check updated Fiddle .