Pass function to a store config option

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:

Code:

---

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)

Try this:

Code:

---

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.

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

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

Code:

---

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

---

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