PDA

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



alex9311
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: [
'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):

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

vietits
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');
//grid.reconfigure(store);
var me = this;
me.control({
'chartgrid': {
render: function(grid){
grid.reconfigure(me.createStore());
}
}
});
}

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