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.

Answer 2

First, you should have a good understanding of how MVC works before attempting to implement it, especially in Ext JS which had MVC support tacked on in a recent version.

Speaking in the general sense (since you're the only one who really knows your code), I would separate the code as such:

• Model: A 9x9 matrix of data values (or a 3x3 matrix of 3x3 matrices), a validation method that determines if the puzzle is solved or if there are any errors in the user input (eg. two 6's in a box), and possibly undo support.

• View: Your container above. The controller should have no idea how the container displays values. I'd probably send my own sudoku-specific events like cellchanged(container, x, y, newValue, oldValue) and undo(container).

• Controller: Listens for the sudoku-specific events in the view and updates the model accordingly. After each update, validates the model to see if the puzzle has been solved or if certain cells are incorrect. Should not act as a relay for all view events. Events like render and resize aren't relevant to the sudoku controller. Only listen for what you actually need.