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 :

Vision d'une liste avec ExtJS 4.x (juste la vision)

Et le mode édition :

Vision d'une liste avec ExtJS 4.x (mode édition d'une ligne)

Le plus intéressant c’est le modèle MVC.
Je vous laisse lire toute la documentation ici, ici et .

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

  1. MB

    Merci pour le tutoriel, cependant dans l’exemple telechargable sur le site il manque le dossier /js/ext il y a bien /js/ext4.0/ dans le fichier php, et meme si je change ext en ext4.0 il manque toujours le fichier example.js.

  2. Olivier Pons

    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

  3. Stéph

    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.

    • Olivier Pons

      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.js donc je suppose que c’est le bon… peux tu me tenir au courant pour me dire si c’est effectivement celui-ci ?

      Merci !

  4. Stéph

    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.php remplacement des /js/ par ../js/
    • app.js remplacement de la valeur de appFolder: Users.js remplacement des valeurs read et update.

    Merci pour ta réponse.

    Stéph.

  5. dudu

    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!!!

  6. Leen

    script type= »text/javascript » src= »../js/ext4.0/bootstrap.js
    script type= »text/javascript » src= »../js/ext4.0/examples.js »

Poster un commentaire

Vous devriez utiliser le HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>