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:-
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) :-
Code:
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.

Code:
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.

Code:
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.

Code:
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.