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