View Full Version : Create store in controller, pass it to views

18 Oct 2012, 2:20 PM
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:

Ext.define('C.controller.Chart', {
extend: 'Ext.app.Controller',
models: [ 'Chart' ],
stores: [ 'Chart' ],
views: [
init: function(){
var store = this.createStore();
var grid = Ext.ComponentQuery.query('chartgrid');
var store = Ext.data.StoreManager.lookup('Chart');
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):

Ext.define('C.view.chart.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.chartgrid',
height: 400,
width: 300,
autoScroll: 'true',
ftype: 'grouping'
initComponent: function(){
//this.store = this.createStore();
{header: 'Level', dataIndex: 'level', width:75},
{header: 'Total', dataIndex: 'total', width:75},

thanks for any tips

18 Oct 2012, 5:18 PM
Your problem maybe due to you refer to grid component before it is rendered. Try to fix your code as below:

Ext.define('C.controller.Chart', {
init: function(){
//var store = this.createStore();
//var grid = Ext.ComponentQuery.query('chartgrid');
var me = this;
'chartgrid': {
render: function(grid){

23 Oct 2012, 4:55 PM
that seems to have done the trick, thank you very much!