PDA

View Full Version : Charts not populating Data



umangsamani
10 Apr 2019, 12:57 AM
I am using ExtJS charts for the first time and also MVC in ExtJS for the first time.
My application has below structure.
Application.js file which has below code:-

Ext.application({
name: 'TestApp',
controllers: [
'MainController'
],
launch: function() {
Ext.create('Ext.container.Container', {
layout: 'fit',
renderTo: 'main-body-content',
id: 'container_id',
items: [
{
xtype: 'mainViewPanel'
}
]
});
});

====

Controller(Entry of controller is made in the application.js file) :-

Ext.define('Testapp.controller.MainController', {
extend: 'Ext.app.Controller',

models: [
'TestApp.model.mainModel'
//Keep/Create adding new Model files as and when required, and add the entry here with proper namespace.
],

stores: [
'TestApp.store.mainStore'
//Keep/Create adding new Store files as and when required, and add the entry here with proper namespace.
],

views: [
'TestApp.view.mainView'
//Keep/Create adding new View files as and when required, and add the entry here with proper namespace.

],

init: function(application) {
console.log("Controller : init");
},


onLaunch: function() {
console.log('Controller : onLaunch');
},

});


====
View(Entry of the view is made in Controller and also an xtype is added in application.js)
Output which I am currently getting : I can see the empty panel on the UI.
And using the sencha Chrome plugin, I can see the store returning the records.


Ext.define('TestApp.view.mainView', {

extend: 'Ext.form.Panel',
alias: 'widget.mainViewPanel',

items : [
{
xtype: 'chart',
id: 'firstChart',
store : 'TestApp.store.mainStore',
axes: [
{
title: 'Cases',
type: 'Numeric',
position: 'left',
fields: ['count'],
minimum: 0,
maximum: 100
},
{
title: 'Type of Case',
type: 'Numeric',
position: 'bottom',
fields: ['fill']
}
],
series: [
{
type: 'bar',
xField: 'fill',
yField: 'count'
}
],
listeners: {
/*'render': {
fn: function() {
console.log("View:Chart:Render");
console.log(this);
},
scope: this,
single: true
},
'afterrender': {
fn: function() {
console.log("View:Chart:AfterRender");

},
scope: this,
single: true
}*/

},
}
],

initComponent:function()
{
this.title='Title of the Page/Panel';
console.log("View : initComponent() of View");
this.border=true;
this.callParent(); // Renders the Panel Components
},
},
);

====
Store : I have one store currently, which makes an ajax call to java backend and returns the data.
When I see the network of developers tools and I can see that proper request to the backend has happened and data is also coming in json format.


Ext.define('TestApp.store.mainStore', {
extend: 'Ext.data.Store',
model: 'TestApp.model.mainModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'ajax/testapp.com.Handler/getTotals',
extraParams: {
sort: 'name',
dir: "ASC"
},
reader: {
type: 'json',
root: 'data'
}
}
});

====
Model : I have one model currently, which has the entries relevant tot he fields which I get in response of the ajax call happening from the store.
Entry of the model is done in store and controller.


Ext.define('TestApp.model.mainModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'string'},
{name: 'type', type:'string'},
{name: 'label', type:'string'},
{name: 'count', type:'int'},
{name: 'color', type:'string'},
{name: 'fill', type:'string'}
//Keep adding the fields by seeing the JSON response
]
},
);


Problem :
I am not sure if just by mapping the store to the xtype:chart in the view, will the store be mapped to the chart, or do we need to do something additional.
Currently I can also see a blank panel with the title which I have given to the panel. And on the console, I do not see any error.
Secondly, I can see all the files getting loaded, I confirmed it using the developers tool, which I am mentioning to say that the mapping of all the files and its structure is happening properly.