PDA

View Full Version : Pass function to a store config option



alex9311
11 Oct 2012, 5:47 PM
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
11 Oct 2012, 11:12 PM
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
12 Oct 2012, 10:24 AM
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
12 Oct 2012, 11:54 AM
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
16 Oct 2012, 4:04 PM
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