MVC architecture of extjs

[venkateshwar]

In my below code, I am trying to connect my main js file(app.js) with the controller and view. Any how I successed in connecting to controller part (showing console messages of controller). Now I am trying to connect to view part with controller, as you can see below. I am failed to do so. What possible mistake could I have been doing here, I can't understand. Here I am trying to understand the function of MVC architecture of extjs. It is my first attempt to understand. Please help

app.js (main js file)

Ext.application({
    name: 'Game',
    appFolder: 'app',
    controllers: ['Sudoku'],
    //views: ['Sudoku'],
    launch: function () {
        console.log("app.js");
    }
});

controller ('app' folder --> 'controller' folder)

Ext.define('Game.controller.Sudoku', {
    extend: 'Ext.app.Controller',
    views: ['Sudoku'],
    init: function () {
        console.log("controller init");
    },
    onLaunch: function () {
        console.log("controller onLaunch");
    }
    
});

view ('app' folder --> 'view' folder)

Ext.define('Game.view.Sudoku', {
    initComponent: function () {
        //my complete sudoku js file here
        console.log("view");
        this.callParent();
    },
    
});

If the connecting of 'model' part differs then please explain that also to me..

[evant]

2 problems:

1) You never call the superclass initComponent method:

this.callParent();

2) You never initialize the view anywhere. The views config just says these are the views we need available. You need to create an instance of it:

new Game.view.Sudoku();

[venkateshwar]

@evant I did call

this.callParent(); //I am not sure whether it is correct

I am not sure where to call new Game.view.Sudoku();

and I have called the initComponent for 'view'.

Can you please just show me in my sample code where to add these steps?

I wasted a lot of time on this