PDA

View Full Version : Dynamic chart labels in a MVC app



hallikpapa
24 Sep 2011, 3:52 PM
So I have an app I am using to learn more about touch. I got the basic framework setup based on tutorials I have found around the net where I can bounce around the app clicking on things. I integrated a sencha touch line chart which works fine.

The problem is I want to populate the series labels for the chart based on data that comes back from the server, not hard code the labels. My plan was to once execute:

Ext.redirect('Chart/Index');

I would hit that controller and load the store. In the onLoad listener for the store, once the data is returned, populate the title array in the series and render the chart. I tried to attach a customer listener to the chart view, and then execute it from the store listener.



listeners: {
load:function(el,records, success){
App.fireEvent('myListener', records);
}
},


That isn't working for me, listener is undefined (I do have it defined in the chart view). So that isn't my solution.

Then I tried to give the chart an id, and do a Ext.query(#myChartName); That returned a html element, not something wrapped in Ext that can be executed.


Now it extsj4, I can put a listener for a store in the controller, and define a method in the controller to execute. It can easily access any component within the controller and would be how I would solve this issue. But that doesn't seem to be how MVC works in the touch apps. The examples I have seen are laid out drastically different in fact. (Why is that btw?)

What's my best solution in taking the data in my store after load and populating the labels/legend in my chart?

Here's the important snippets of code:

STORE


App.stores.BacklinkStore = new Ext.data.JsonStore({
root: 'data',
idProperty: 'pa',
sorters : {property: 'pa', direction: 'ASC'},
proxy: {
type : 'ajax',
url : '/moz/backlinks/',
reader: {
type : 'json'
}
},
listeners: {
load:function(el,records, success){
//Load the series title in the BacklinkView

//FIRST Attempt; didn't work
//App.fireEvent('myListener', records);


//SECOND attempt; didn't work
//Ext.dispatch({
// controller: App.controllers.Link,
// action: 'show',
// id: records
//});

}
},
fields: [{
name: 'pa',
type: 'int'
}, {
name: 'domain1',
type: 'string'
}, {
name: 'count1',
type: 'int'
}, {
name: 'domain2',
type: 'string'
}, {
name: 'count2',
type: 'int'
}, {
name: 'domain3',
type: 'string'
}, {
name: 'count3',
type: 'int'
}, {
name: 'domain4',
type: 'string'
}, {
name: 'count4',
type: 'int'
}, {
name: 'domain5',
type: 'string'
}, {
name: 'count5',
type: 'int'
}]
});


CHART VIEW



App.views.BacklinkIndex = Ext.extend(Ext.chart.Chart, {
id: 'backlink-chart',
title: 'Backlinks by PA',
iconCls: 'area',
cls: 'chartpanel',
theme: 'Energy',
interactions: ['reset', {
type: 'panzoom',
axes: {
right: {}
}
},{
type: 'iteminfo',
gesture: 'tap',
listeners: {
show: function(interaction, item, panel) {
App.popup(item, panel);
}
}
}],
animate: false,
store: App.stores.BacklinkStore,
axes: [{
type: 'Numeric',
position: 'right',
minimum: 0,
label: {
renderer: App.commify
},
adjustMinimumByMajorUnit: 0,
fields: ['count1', 'count2', 'count3', 'count4', 'count5'],
title: '# of Links'
},{
type: 'Category',
position: 'bottom',
fields: ['pa'],
title: 'Page Authority (PA)',
label: {
rotate: {
degrees: 45
}
}
}],
series: [{
type: 'area',
highlight: false,
title: [],
axis: 'right',
xField: 'pa',
yField: ['count1', 'count2', 'count3', 'count4', 'count5']
}],
listeners: {
myListener: function(records) {
console.log('made it here');
},
afterrender: function(me) {
me.on('beforerefresh', function() {
if (me.ownerCt.getActiveItem().id !== me.id) {
return false;
}
}, me);
}
},
initComponent: function() {
//App.stores.BacklinkStore.load();
this.legend.position = Ext.is.Phone ? 'left' : 'top';
App.views.BacklinkIndex.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('BacklinkIndex', App.views.BacklinkIndex);



CONTROLLER



Ext.regController('Link', {

// index action
index: function(options) {

if ( !this.indexView ) {
this.indexView = this.render({
xtype: 'LinkIndex',
legend: {
position: Ext.is.Phone ? 'left' : 'top' //Bug in class so placed it here
}
});
}
// this.application.addListener('myListener', function(records) {
// var arr = Ext.query('#backlink-chart');
// for(var i=0; i < records.length; i++) {
// var x = this.indexView;
// }
//
// }, false);


this.application.viewport.setActiveItem(this.indexView, options.animation);
},
show: function(options, data) {
}
});



FYI, I tried adding the listener to multiple things/objects like the app, the view, within the controller, still no luck.