J’ai eu à faire face à un problème.
Malgré le fait que j’aie l’impression que la variable soit accessible parce que c’est un accès à l’intérieur de la classe, ça ne fonctionnait pas et l’erreur ressortait systématiquement :
this.writerForm: variable unknown

J’ai mis en gras ci-dessous le code qui pose problème :

Ext.define('Writer.Panel', {
    extend: 'Ext.panel.Panel',

    initComponent: function(){
        this.writerForm = new Writer.Form({
            listeners: {
                create: function(form, data){
                    this.store.insert(0, data);
                }   
            }   
        }); 
        this.writerGrid = new Writer.Grid({
            store: this.store,
            listeners: {
                selectionchange: function(selModel, selected) {
                    this.writerForm.setActiveRecord(selected[0] || null);
                }   
            }   
        }); 
        Ext.apply(this, {
            layout:'border',
            items:[{
                region:'north',
                layout:'fit',
                items: [this.writerGrid]
            },{ 
                region:'center',
                layout:'fit',
                items: [this.writerForm]
            }]  
        }); 
        this.callParent();
    }   
});

La solution est simple : il semblerait que ça soit un hack ExtJs, mais ça fonctionne, et j’espère que je vais vous éviter de perdre autant de temps que moi. Il faut ajouter « scope: this » au code.
J’ai mis en gras ci-dessous le code qui a résolu problème :

Ext.define('Writer.Panel', {
    extend: 'Ext.panel.Panel',

    initComponent: function(){
        this.writerForm = new Writer.Form({
            listeners: {
                create: function(form, data){
                    this.store.insert(0, data);
                }   
            }   
        }); 
        this.writerGrid = new Writer.Grid({
            store: this.store,
            listeners: {
                /* super important pour les fonctions anonymes */
                scope: this,
                selectionchange: function(selModel, selected) {
                    this.writerForm.setActiveRecord(selected[0] || null);
                }   
            }   
        }); 
        Ext.apply(this, {
            layout:'border',
            items:[{
                region:'north',
                layout:'fit',
                items: [this.writerGrid]
            },{ 
                region:'center',
                layout:'fit',
                items: [this.writerForm]
            }]  
        }); 
        this.callParent();
    }   
});

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 :).