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:

enter image description here

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");
    }
});

@sra sorry it was typo, I changed it. eventhough I can't see "hello" in my chrome console. I extended controller and view as mentioned in the docs. Am I doing here correct? — Mr_Green
@sra somehow I get into the controller part. (showing the messages of controller). Now it is just not showing 'view' message i.e., 'hello'. where could I have gone wrong I can't understand. — Mr_Green
You need to tell the controller what he should do. For example loading your view when he loads. For that you may use refs (there are some other ways but I think refs are the easiest in your case) note to define the refs before you call them. — sra
@sra Can you please show me where to give ref (ref seems to be private)? I even asked the same question on sencha forums — Mr_Green

sra sra · Accepted Answer · 2013-02-08T12:45:14

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.

Explain MVC architecture of extjs

EDIT: (unfinished and unstructured code)

2 Answers