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 :).
Très bon tutoriel qui se consacre à l’essentiel ! Merci beaucoup, voici qui va bien m’assister dans mes développements.
Avec grand plaisir, j’ai passé beaucoup de temps avant de pouvoir faire ce résumé, au moins je ne l’aurai pas fait pour rien 😉
Merci pour le tutoriel, cependant dans l’exemple telechargable sur le site il manque le dossier
/js/extil y a bien/js/ext4.0/dans le fichier php, et meme si je changeextenext4.0il manque toujours le fichierexample.js.Le lien n’est plus dispo pour le téléchargement…
C’est une 404.
J’aurai besoin de cette exemple pour mon stage car la je galère 🙂
Bonjour, effectivement je l’ai supprimé parce que je n’avais plus besoin de mes archives de début… vers lesquelles j’avais fait un lien 🙁
J’ai demandé aux différents commentateurs ici s’ils ne l’avaient pas gardé, je te tiens au courant, et bonne chance pour ton stage, parce que ExtJs c’est aussi puissant que long à apprendre !
Olivier
Et voilà l’exemple : http://fmichaud.com/pz/siteinternet.tar.bz2
@Rom : mis à jour grâce à François, merci encore !
Bonjour,
Je suis confronté au même problème que MB, je n’ai pas le fichier examples.js, est-ce celui qui se trouve dans shared ?
Merci.
Stéph.
Bonjour,
Je n’ai malheureusement pas du tout le temps de me pencher dessus. J’ai trouvé le fichier
js/ext4.0/examples/shared/examples.jsdonc je suppose que c’est le bon… peux tu me tenir au courant pour me dire si c’est effectivement celui-ci ?Merci !
Bonjour,
J’ai essayé de mettre ce chemin, et cela fonctionne maintenant.
Petit changement aussi pour que cela fonctionne dans n’importe quel répertoire :
qs.phpremplacement des/js/par../js/app.jsremplacement de la valeur deappFolder: Users.jsremplacement des valeursreadetupdate.Merci pour ta réponse.
Stéph.
Bonjour, j’ai un souci pour le tester. J’ai changé les chemins comme il faut mais ça ne marche pas…
Suite au commentaire de steph je me dit que le problème vient de là où sont ces valeurs read et update et comment faut-il changer ça exactement?
appFolder: '/js/gs/app', controllers: [ 'Users' ],En passant merci super partage et le site est super sympa continue!!!
Il faut juste modifier ces liens :
à la place de (il manquait le 4.0)
Merci pour le tuto
script type= »text/javascript » src= »../js/ext4.0/bootstrap.js
script type= »text/javascript » src= »../js/ext4.0/examples.js »