Pass function to a store config option

[alex9311]

I'm returning a store in a function in this view file. I want to pass that store to the chart I'm defining as its store. Is this possible? Is there a workaround in MVC?

Here is my attempt:

Ext.define('C.view.chart.Chart' , {
        extend: 'Ext.chart.Chart',
        alias: 'widget.chartchart',
        width: 500,
        height: 600,
        animate: true,
        store: this.createStore(),
        shadow: true,
        legend: {
            position: 'right'
        },
        insetPadding: 25,
        series: [{
                type: 'pie',
                field: 'number',
                showInLegend: true,
                tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                                //calculate percentage.
                                var total = 0;
                                chart.each(function(rec) {
                                        total += rec.get('number');
                                });
                                this.setTitle(storeItem.get('level') + ': ' + Math.round(stor$
                        }
                },
                highlight: {
                        segment: {
                                margin: 20
                        }
                },
                label: {
                        field: 'level',
                        display: 'rotate',
                        contrast: true,
                        font: '18px Arial'
                }
        }],
        createStore:function(){
                var store = Ext.data.StoreManager.lookup('Chart');
                store.group('grade');
                var groups = store.getGroups();
                // create new store basing on groups array
                var groupStore = Ext.create('Ext.data.Store', {
                        fields: [{
                                name:'grade', mapping: 'name'
                        }, {
                                name: 'total', convert: function(value, record){
                                        return record.raw.children.length;
                                }
                        }],
                        data: groups
                });
        return groupStore;
        }
});

I have a store "Chart.js" with fields name and grade. My new store has the fields name (of the grade) and total (total students in that grade)

[vietits]

Try this:

Ext.define('C.view.chart.Chart' , {
    extend: 'Ext.chart.Chart',
    alias: 'widget.chartchart',
    width: 500,
    height: 600,
    animate: true,
    // store: this.createStore(), <- this will cause "Object [object Window] has no method 'createStore'" error
     initComponent: function(){
        this.store = this.createStore();
        this.callParent(arguments);
    },
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 25,
    series: [{
        type: 'pie',
        field: 'number',
        showInLegend: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
                //calculate percentage.
                var total = 0;
                chart.each(function(rec) {
                    total += rec.get('number');
                });
                this.setTitle(storeItem.get('level') + ': ' + Math.round(stor$
            }
        },
        highlight: {
            segment: {
                margin: 20
            }
        },
        label: {
            field: 'level',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }],
    createStore:function(){
        var store = Ext.data.StoreManager.lookup('Chart');
        store.group('grade');
        var groups = store.getGroups();
        // create new store basing on groups array
        var groupStore = Ext.create('Ext.data.Store', {
            fields: [{
                name:'grade', mapping: 'name'
            }, {
                name: 'total', convert: function(value, record){
                    return record.raw.children.length;
                }
            }],
            data: groups
        });
        return groupStore;
    }
});

However, I suggest you move the code of createStore() to controller or store and then pass created store to your view creating.

[alex9311]

Hi again vietits, thanks again for responding. Your fix helps but the store still seems to be wrong. All I'm getting is

Grade, Total
NaN, 7

I'm going spend some time trying to fix the createStore method, I'm guessing thats where the problem is

[alex9311]

figured it out, there were some issues in the tip renderer. I also hardcoded/included a model for the store to use, not sure if that makes a difference

Ext.define('C.view.chart.Chart' , {
        extend: 'Ext.chart.Chart',
        alias: 'widget.chartchart',
        width: 600,
        height: 500,
        //animate: true,
        initComponent: function(){
                this.store = this.createStore();
                this.callParent(arguments);
        },
        shadow: true,
        legend: {
            position: 'right'
        },
        series: [{
                type: 'pie',
                field: 'total',
                showInLegend: true,
                tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                                //calculate percentage.
                                var total = 0;
                                chart.each(function(rec) {
                                        total += rec.get('total');
                                });
                                this.setTitle(storeItem.get('grade') +  ': ' + Math.round(storeItem.get('total') / total * 100) + '%');
                        }
                },
                highlight: {
                        segment: {
                                margin: 20
                        }
                },
                label: {
                        field: 'grade',
                        display: 'rotate',
                        contrast: true,
                        font: '18px Arial'
                }
        }],

        createStore:function(){
                var store = Ext.data.StoreManager.lookup('Chart');
                store.group('grade');
                var groups = store.getGroups();
                // create new store basing on groups array
                var groupStore = Ext.create('Ext.data.Store', {
                        model: 'C.model.GroupChart',
                        fields: [{
                                name:'grade', mapping: 'name'
                        }, {
                                name: 'total', convert: function(value, record){
                                        return record.raw.children.length;
                                }
                        }],
                        data: groups
                });
        return groupStore;
        },
});

[alex9311]

Is there a specific way you reccomend passing a store created in a controller to a view? I'm having trouble finding documentation on this