1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default Answered: Create store in controller, pass it to views

    Answered: Create store in controller, pass it to views


    Hey all,
    I have a function (createStore) which creates a store based on an existing hardcoded store. I used to have this function defined in several of my views and call this.createStore() in each one. I want to optimize my code and call createStore only once in my controller and pass the resulting store to my views.

    I am using the reconfigure method for my grid to change the store from the controller init function. Firebug is telling me reconfigure is not a function for the variable referencing my grid

    Here is my controller code:
    Code:
    Ext.define('C.controller.Chart', {
            extend: 'Ext.app.Controller',
            models: [ 'Chart' ],
            stores: [ 'Chart' ],
            views: [
                    'chart.Panel',
                    'chart.Chart',
                    'chart.Grid',
                    'chart.GridOrig',
                    'chart.BarChart'
            ],
            init: function(){
                    var store = this.createStore();
                    var grid = Ext.ComponentQuery.query('chartgrid');
                    grid.reconfigure(store);
            }
            createStore:function(){
                    var store = Ext.data.StoreManager.lookup('Chart');
                    store.group('level');
                    var groups = store.getGroups();
                    // create new store basing on groups array
                    var groupStore = Ext.create('Ext.data.Store', {
                            model: 'C.model.GroupChart',
                            fields: [{
                                    name:'level', mapping: 'name'
                            }, {
                                    name: 'total', convert: function(value, record){
                                            return record.raw.children.length;
                                    }
                            }],
                            data: groups
                    });
            return groupStore;
            },
    });
    Here is the code from one of my views (a grid):
    Code:
    Ext.define('C.view.chart.Grid', {
            extend: 'Ext.grid.Panel',
            alias: 'widget.chartgrid',
            height: 400,
            width: 300,
            autoScroll: 'true',
            features:[{
                    ftype: 'grouping'
            }],
            initComponent: function(){
                    //this.store = this.createStore();
                    this.columns=[
                            {header: 'Level',      dataIndex: 'level',      width:75},
                            {header: 'Total',       dataIndex: 'total',     width:75},
                    ];
                    this.callParent(arguments);
            }
    });
    thanks for any tips

  2. Your problem maybe due to you refer to grid component before it is rendered. Try to fix your code as below:
    Code:
    Ext.define('C.controller.Chart', {
        ...
        init: function(){
            //var store = this.createStore();
            //var grid = Ext.ComponentQuery.query('chartgrid');
            //grid.reconfigure(store);
            var me = this;
            me.control({
                'chartgrid': {
                    render: function(grid){
                        grid.reconfigure(me.createStore());
                    }
                }
            });
        }

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      1  

    Default


    Your problem maybe due to you refer to grid component before it is rendered. Try to fix your code as below:
    Code:
    Ext.define('C.controller.Chart', {
        ...
        init: function(){
            //var store = this.createStore();
            //var grid = Ext.ComponentQuery.query('chartgrid');
            //grid.reconfigure(store);
            var me = this;
            me.control({
                'chartgrid': {
                    render: function(grid){
                        grid.reconfigure(me.createStore());
                    }
                }
            });
        }

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default


    that seems to have done the trick, thank you very much!

Thread Participants: 1

Tags for this Thread