Explain MVC architecture of extjs

Question

I created a small sudoku app using Javascript. Now I am trying to convert that javascript code into extjs (4.1.1a) code. I have gone through the docs to understand the MVC Architecture, but it seemed not so detailed for me as I am a beginner.

Can someone please explain the MVC Architecture of Extjs based on my Sudoku app?

The design of my sudoku app code is as follows:

The description of the above design is as follows:

• container (blue) --> parent panel (grey) --> child panel (red)

• The "parent panels" are nine and each "parent panel" has nine "child panels".

• The HTML elements of "parent panels" and the "child panels" are being generated dynamically by using for loops.

• I have written events like KeyDown events and click events on "child panels".

• I have also written some functions like

  checkGroup()       --> checks in each "parent panel" whether there are any duplicate numbers checkVertical()     --> checks in each vertical line of "container" for duplicate numbers checkHorizontal() --> checks in each horizontal line of "container" for duplicate numbers

---

EDIT: (unfinished and unstructured code)

app.js (main js file)

Ext.application({
     name: 'Game',
     appFolder: 'app',  
     controllers: ['Sudoku']     
});

controller ('app' folder --> 'controller' folder --> Sudoku.js)

//By using 'controller', trying to call 'view' here
Ext.define('Game.controller.Sudoku', {
    extend: 'Ext.app.Controller',

    init: function () {
        console.log("controller init");
    },
    onLaunch: function () {
        console.log("controller onLaunch");
    },
    views: ['Sudoku']
});

view ('app' folder --> 'view' folder --> Sudoku.js)

Ext.define('Game.view.Sudoku', {
    extend: 'Ext.window.Window',  //what should I extend here for view?       
    initComponent: function () {
        //my complete sudoku js file here
        console.log("hello");
    }
});

Answer 1

From all that I know of your app I can say nearly nothing. You have a really specific view with some listeners and actions where none should bother a controller.

A controller would create the container as view and may pass some config options to it without bothering much about the other nested panels. The controller may also listen to events of this container like a button that ends the game or save the game.

MVC doesn't mean that you would relay all events and logic into the controller.

Even if this is in your opinion rather complex it is still just a view.