Threaded View

  1. #1
    Sencha User olivierpons's Avatar
    Join Date
    Dec 2009
    Location
    Aix en Provence,France
    Posts
    116
    Answers
    6
    Vote Rating
    1
    olivierpons is on a distinguished road

      0  

    Default Answered: Overload Ext.data.Store not working

    Answered: Overload Ext.data.Store not working


    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?

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

Thread Participants: 1

Tags for this Thread