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

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.