Mots-clé : ExtJs

ExtJs et variables locales – fonctions anonymes

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();
    }   
});

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

ExtJS et PhoneGap : une nouvelle façon de voir les choses

Comme je l’ai toujours dit, ExtJS est une librairie JavaScript extrêmement puissante.
Le seul problème c’est qu’elle est dure à maitriser… mais les résultats obtenus sont incroyablement beaux par rapport au temps de développement.

La même société, Sencha, qui n’est constituée – apparemment – que de personnes très compétentes, a développé le même système, mais pour téléphones portables : le Sencha Touch.

Et ils se sont penchés sur ce que j’appellerai le site du moment : PhoneGap.

Ils ont fait un tutoriel qui vous permet de combiner la puissance de PhoneGap et de Sencha Touch :

http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap

J’expliquerai plus en détail dans un prochain article comment fonctionne PhoneGap, mais à mon avis, c’est l’avenir pour des développeurs comme moi qui n’ont pas le temps de se pencher sur les plateformes mobiles spécifiques : je n’ai pas le temps d’apprendre tout iOS et je n’ai pas le temps d’apprendre Android. Par contre je connais bien JavaScript, je commence à bien connaitre HTML5, et grâce à PhoneGap, on peut aller loin, très loin 😉

ExtJS et Panel : le layout « absolute »

Après plusieurs heures de recherches, j’ai enfin compris comment fonctionnait le layout « absolute ».
L’utilité de la disposition "absolute", est qu’on peut positionner les éléments dans le conteneur à un endroit bien précis, au pixel près.
Voici l’astuce qui m’a fait perdre tellement de temps, et qui, je l’espère, vous en fera gagner :
D’habitude, sur tous les « layout » existants, lorsqu’on les définit, ils s’appliquent sur les éléments contenus. Et non pas sur le conteneur.
La seule exception se trouve avec le layout « absolute » : je le mets en gros et gras, parce que j’ai passé énormément de temps à trouver cette astuce :

Lorsqu’on utilise le layout « absolute », il faut toujours préciser aussi la largeur et la hauteur du conteneur, sinon ce dernier ne sera jamais affiché

Exemple concret :
Voici ce qui ne fonctionnait pas :
MonPanel = function(tab) {
    this.layout = 'absolute';
    this.border = false;
    MonPanel.superclass.constructor.call(this, {
        items: [{
            x: 0,
            y: 5,
            xtype: 'label',
            text: 'To:',
        }]
    });
};

Le panneau n’était pas affiché. Voici ce qui ne fonctionne :
MonPanel = function(tab) {
    this.layout = 'absolute';
    this.border = false;
    this.width = '100%';
    this.height = 150;
    MonPanel.superclass.constructor.call(this, {
        items: [{
            x: 0,
            y: 5,
            xtype: 'label',
            text: 'To:',
        }]
    });
};

ExtJs : comment accéder aux variables GET ?

Avec la librairie ExtJs, Comment accéder aux variables GET qui sont dans l’URL ?

Cet article s’inspire de la discussion dans ce forum ici.

Il vous suffit de déclarer une fonction de Ext, par exemple :

Ext.getUrlParam = function(param) {
    var params = Ext.urlDecode(location.search.substring(1));
    return param ? params[param] : params;
};

Et ensuite, de l’appeler de cette façon :

var param = Ext.getUrlParam('ident');
if (param=='test') {
    alert('ok');
}

Pour tester si ce code fonctionne, il suffit de le mettre dans une page qui contient la librairie ExtJs, et de l’appeler avec le paramètre ‘test‘. Par exemple, si votre page s’appelle monexemple.php, il vous faudrait la tester ainsi : http://www.localsite/monexemple.php?ident=test.

Pour la note, j’utilise la librairie JavaScript ExtJs et j’apprends à m’en servir. Je suis actuellement en pleine découverte de ses possibilités, et elles sont grandes.