Mots-clé : Store

ExtJs : dériver un Store « générique » et s’en servir

Ça fait plus d’une journée que je cherche comment faire un Store générique, c’est à dire que j’ai plusieurs Store qui sont tous basés sur le même modèle avec le même type de proxy, etc.

Donc au lieu de faire un copier coller pour chaque Store, j’ai cherché comment en faire un « générique » auquel je pourrai appliquer une configuration « par défaut ».

Voilà le code complet résultat, avec les fonctions qui gère les erreurs possibles renvoyées par Php (session expirée, problème d’écriture en base de données, etc).

Ce qui m’a pris le plus de temps à trouver c’est que pour « surcharger » le constructeur, ça n’est pas la fonction classique « initComponent: function(){ } » mais la fonction de base "constructor: function(config) { }".

Il ne faut, de plus, surtout pas oublier d’appeler le parent, non pas via this.callParent(); mais via this.callParent([config]);.

Ci suit du code, le code de plus d’une journée de travail, en deux parties (j’espère qu’il sauvera du temps à des personnes, ou qu’il les mettra sur la bonne voie !) :

  • première partie = la surcharge
  • seconde partie = exemple d’utilisation de cette surcharge

Première partie : code de la classe

Ext.define('Ext.data.StoreHandleErrors', {
    extend: 'Ext.data.Store',
    alias: 'data.storehandleerrors',

    constructor: function(config) {
        /* (!!) Réécriture par dessus certaines propriétés
         *      du proxy : si jamais elles existent déjà,
         *      elles vont être réécrites.
         */
        config.autoLoad= true;
        config.autoSync= true;
        config.proxy.type= 'ajax';
        config.proxy.reader= {
            type: 'json',
            successProperty: 'success',
            root: 'data',
            messageProperty: 'message'
        };  
        config.proxy.writer= {
            type: 'json',
            writeAllFields: true,
            root: 'data'
        };  
        config.proxy.listeners= {

            exception: function(proxy, response, operation) {

                var error=operation.getError(),
                    title='Erreur du serveur';

                if (error instanceof Array) {
                  error=error.join("
");
                }   

                switch(response.status) {

                case 200:
                    if (response.responseText!='') {
                        var b = Ext.JSON.decode(response.responseText);
                        if (b.title) {
                            title=b.title;
                        }   
                        if (b.success==false) {
                            if (b.timeout==true) {
                                windowLoginPanel.show();
                            }   
                        }   
                    }   
                    break;

                case -1: 
                    var error=
                        'Le serveur met trop de temps à répondre'+
                        '

'+
                        'On ne peut rien faire, essayez '+
                        'd\'actualiser la page.';
                    break;

                case 500:
                    var error=
                        'Le serveur a une erreur interne.'+
                        '

'+
                        'On ne peut rien faire, essayez '+
                        'd\'actualiser la page.';
                    break;

                default:
                    var error=
                        'Erreur renvoyée par le serveur non gérée.
'+
                        'Détails :
'+
                        response.statusText+
                        '

'+
                        'On ne peut rien faire, essayez '+
                        'd\'actualiser la page.';
                    break;
                }   
                Ext.MessageBox.show({
                    title: title,
                    msg: error,
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                }); 
            }   
        };  
        this.callParent([config]);
        this.on(
            'write',
            function(proxy, operation) {
                if ( (operation.action == 'create') ||
                  (operation.action == 'update')
                ) { 
                    var m = this.getById(
                        parseInt(
                            operation.resultSet.records[0].internalId
                        )   
                    );  
                } else if (operation.action == 'destroy') {
                    var m = this.getAt(0);
                }   
                if (m) {
                    this.panelGridEtEdit.gsGrid.getSelectionModel().select(m);
                } else {
                    this.panelGridEtEdit.gsGrid.getSelectionModel().deselectAll();
                }   
                Ext.example.msg(
                    Ext.String.capitalize(operation.action),
                    operation.resultSet.message
                );  
            },  
            this
        );  
    }   
});

Seconde partie : utilisation de la classe

    var storeAdresses = Ext.create('Ext.data.StoreHandleErrors', {
        model: 'Intranet.Adresse',
        proxy: {
            api: {
                read: '/json/intranet/liste/adresses/',
                create:  '/json/intranet/item/adresse/?mode=create',
                update:  '/json/intranet/item/adresse/?mode=update',
                destroy: '/json/intranet/item/adresse/?mode=destroy'
            }   
        }   
    });

ExtJs, DataGrid, Store et événements : mémo pour le déboguage

Voici un petit mémo simple : si vous essayez de comprendre dans quel ordre se font les événements, je vous conseille de lire la page ici.

Parmi tout ce qui est expliqué, voici ce que j’utilise le plus souvent : une fonction de trace des événements.
Faites comme moi : un bon copier-coller des familles, et vous aurez dans votre console tous les événements concernant l’objet que vous voulez :

function captureEvents(observable) {
    Ext.util.Observable.capture(
        observable,
        function(eventName) {
            console.info(eventName);
        },
        this
    );		
}
 
Ext.onReady(function(){
    var grid = new Ext.grid.GridPanel({
        ... 
    });
 
    captureEvents(grid);
});

Exemple concret : j’avais un problème, lorsque je créais un nouvel enregistrement dans une DataGrid, j’avais beau essayer de le sélectionner, rien n’y faisait. J’ai cherché pendant des heures, j’ai essayé d’éliminer au fur et à mesure des choses, jusqu’à ce que je mette en place ce code, et là, magie, dans la console :

>beforeload
>datachanged
>load
>read
>add
>datachanged
>beforesync
>write
>datachanged

J’ai vu qu’en fait après l’événement d’ajout « add » sur lequel je comptais pour sélectionner l’élément en cours, il y avait… une mise à jour (« beforesync », « write », « datachanged ») !
En fait ça a fait tilt : j’avais activé la synchronisation automatique des données, et donc juste après l’insertion, le store tentait de se synchroniser, donc la sélection était inévitablement dé-sélectionnée.

Ici aussi, comme dans la plupart de mes articles techniques, j’espère avoir aidé la communauté et avoir évité à d’autre personnes de perdre des heures inutiles, comme celles que j’ai passées !