Overload Ext.data.Store not working

**olivierpons** · 25 Apr 2012 12:28 PM

Hi!

Here's what I've done (and it works): declare two functions:

Code:

var fnStoreAfterWrite=function(proxy, operation) {
    Ext.example.msg(
        Ext.String.capitalize(operation.action),
        operation.resultSet.message
    );
};
var fnStoreException=function(proxy, response, operation) {
    var error=operation.getError();
    if (error instanceof Array) {
      error=error.join("<br />");
    }
    Ext.MessageBox.show({
        title: 'Erreur du serveur',
        width: '50%',
        msg: error,
        icon: Ext.MessageBox.ERROR,
        buttons: Ext.Msg.OK
    });
};

And now create a store:

Code:

    var storeCategories = Ext.create('Ext.data.Store', {
        model: 'Intranet.Categorie',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            api: {
                read: 'xx',
                create:  'xx',
                update:  'xx',
                destroy: 'xx'
            },
            reader: {
                type: 'json',
                successProperty: 'success',
                root: 'data',
                messageProperty: 'message'
            },
            writer: new Ext.data.writer.Json( {
                type: 'json',
                writeAllFields: true,
                root: 'data'
            }),
            listeners: {
                exception: fnStoreException
            }
        },
        
        listeners: {
            write: fnStoreAfterWrite
        }
    });

Look at the last lines of code: they call the functions. I wanted to overload Ext.data.Store this way:

Code:

Ext.define('Ext.data.StoreHandleErrors', {
    extend: 'Ext.data.Store',
    alias: 'widget.datastorehandleerrors',
    initComponent: function(){
        this.callParent();
    },  

    onStoreException: function(proxy, response, operation) {
        Ext.MessageBox.show({
            title: 'Erreur du serveur',
            width: '50%',
            msg: operation.getError(),
            icon: Ext.MessageBox.ERROR,
            buttons: Ext.Msg.OK
        }); 
    },  

    onStoreAfterWrite: function(proxy, operation) {
        Ext.example.msg(
            Ext.String.capitalize(operation.action),
            operation.resultSet.message
        );  
    }   
});

And then do something like:

Code:

    var storeCategories = Ext.create('Ext.data.StoreHandleErrors', {
        model: 'Intranet.Categorie',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            api: {
                read: 'xx',
                create:  'xx',
                update:  'xx',
                destroy: 'xx'
            },
            reader: {
                type: 'json',
                successProperty: 'success',
                root: 'data',
                messageProperty: 'message'
            },
            writer: new Ext.data.writer.Json( {
                type: 'json',
                writeAllFields: true,
                root: 'data'
            }),
            listeners: {
                exception: this.onStoreException
            }
        },
        
        listeners: {
            write: this.onStoreAfterWrite
        }
    });

But it doesn't work, there's a JavaScript exception.

Any idea of what I'm doing wrong?

olivierpons

Ok here's my whole code. I don't know if it's the right way to do it but it works, and it seems "generic" enough for me.

First part: create a descendant of Ext.data.Store, and create a "default config" even for its proxy:

Code:

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

    constructor: function(config) {
        /* (!!) override some proxy properties
         *      (!!) if they exist they'll be overwritten
         */
        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
        );
    }
});

Second part: how to use the class:

Code:

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

Overload Ext.data.Store not working

Thread Tools

Search Thread

Display

Threaded View

Answered: Overload Ext.data.Store not working

Answered: Overload Ext.data.Store not working

Tags for this Thread