ExtJS 4 et le MVC (modèle-vue-contrôleur) – howto
Ci suivent quelques notes que j’ai prises après toute une journée passée à créer en entier l’exemple qui fonctionne.
Vous pouvez télécharger, puis décompresser l’exemple en entier en cliquant ici.
Pour l’installer et le tester c’est très simple : le répertoire s’appele « siteinternet » et c’est là qu’est le site internet, il vous suffira d’afficher la page « http://localhost/intranet/gs.php ». Oui j’ai développé cet exemple dans un sous-répertoire « intranet » car ExtJS est destiné, pour ma part à faire uniquement de l’administration.
Voici ce qui fonctionne : la vision d’une liste :
Et le mode édition :
Le plus intéressant c’est le modèle MVC.
Je vous laisse lire toute la documentation ici, ici et là.
Maintenant je vous fais un résumé de ce que j’ai retenu :
L’architecture
Elle doit absolument suivre ce schéma :
`-- app |-- controller |-- data |-- model |-- store `-- view
———————
controller =
Ce qui assemble data + model + store + view En général les contrôleurs créent les vues et attendent des évenements pour agir en conséquence.
model =
Là où on définit les colonnes des ensembles de données. C’est là aussi où on définit en général où aller chercher les données par défaut (« proxy »).
store =
Là où on définit sur quels modèles on se base, et où on surcharge là où aller chercher les données (= redéfinition de « proxy »).
Règles de syntaxe à respecter :
store = noms au pluriel :
app/store/Stations.js
model = noms au singulier :
app/model/Station.js
Notation :
- au début, de type « bosse de chameau »,
- au milieu tout en minuscules,
- à la fin, de type « bosse de chameau » :
MonApplication.model.UserList
MonApp.view.user.List
MonApp.view.user.User
Panda.view.NewStation
Panda.view.SongControls
Arbre complet des fichiers de l’exemple ici :
gs |-- app | |-- controller | | `-- Users.js | |-- data | | |-- users.json | | `-- usersUpdate.json | |-- model | | `-- User.js | |-- store | | `-- Users.js | `-- view | `-- user | |-- Edit.js | `-- List.js `-- app.js
A partir de là, à vous de jouer.
Au début, ce n’est pas simple, mais au final, c’est extrêmement évolutif et on gagne énormément de temps. Un peu comme d’apprendre vim
:).
13 comments