Personnellement, je trouve qu'ExtJS est assez bien documenté pour les cas nominaux, mais manque cruellement d'exemples dans le cas des traitements d'exception. C'est dommage car on le sait bien, les cas nominaux ne sont pas toujours au rendez-vous ;)
Dans ce mini tutoriel, un service "getUsers" permet de retourner une liste d'utilisateurs (il peut être implémenté en PHP par exemple, mais ce n'est pas l'objet de ce tutorial).
Voici un exemple de retour fait par ce service lorsqu'aucune erreur ne survient :
{A noter : dans cet exemple, 4 utilisateurs sont retournés sous le noeud "rows", et la propriété "success" vaut "true".
"results":4,
"rows":
[{"id":"1",
"login":"brice",
"date_inscription":"2009-02-10 14:20:00",
"fullname":"Brice"},
{"id":"10",
"login":"toto",
"date_inscription":"2009-10-28 08:10:00",
"fullname":"toto"},
{"id":"11",
"login":"toto2",
"date_inscription":"2009-10-28 08:10:00",
"fullname":"toto2"},
{"id":"13",
"login":"toto4",
"date_inscription":"2009-10-28 09:10:00",
"fullname":"toto4"}],
"success":true
}
Voici le retour du même service lorsqu'une erreur survient (ie. Base de donnée injoignable) :
{A noter : dans cet exemple, 1 exception a été levée et traduite sous la forme d'un message d'erreur (id="500", msg="Erreur de connexion à la base de donnée."), et la propriété "success" vaut "false".
"results":1,
"success":false,
"errors":[
{"id":"500",
"msg":"Erreur de connexion à la base de donnée."
}]
}
Voici maintenant comment gérer ces 2 types de retour côté client à l'aide d'ExtJS :
var dateFormat = 'Y-m-d G:i:s';A noter : dans cet exemple, on déclare l'Ext.data.Storedoc "myStore" qui va faire appel au service ('getUsers.php5'), et va lire le résultat grâce à un analyseur JSON (JSONReaderdoc). La lecture sera considérée comme un succès si la propriété "success" vaut "true". La manière d'interpréter les différents champs est également décrite.
// ancienne valeur par defaut : 'm/d/Y'
// dateFormat correspond a une date
// de la forme : "2009-10-28 10:10:00"
var myStore = new Ext.data.Store({
url: 'http://localhost/getUsers.php5', // URL du service JSON
title: 'TOTO',
reader: new Ext.data.JsonReader({ // Reader JSON
idProperty: 'id',
root: 'rows',
totalProperty: 'results',
successProperty:'success',
fields: [
{name: 'id'},
{name: 'login'},
{name: 'date_inscription',
type: 'date',
dateFormat: dateFormat},
{name: 'fullname'}
]
})
});
On va également implémenter un analyseur JSON (JSONReader) capable d'interpréter un retour en erreur :
var errorReader = new Ext.data.JsonReader({A noter : dans cet exemple, la structure JSON lue doit posséder le nombre d'erreur sous "results" et les différentes erreurs sous la racine "errors". Ici une erreur comporte 2 champs : un "id" et un "msg".
idProperty: 'id',
root: 'errors',
totalProperty: 'results',
fields: [
{name: 'id'},
{name: 'msg'}
]
});
Il convient ensuite de déclarer une méthode de traitement d'erreur de la manière suivante :
myStore.on('exception', usrException);A noter : dans cet exemple, on indique pour myStore que sur réception de l'évènement "exception", un appel à la méthode "usrException(...)" doit être fait. Dans la version 3 d'ExtJSdoc, l'évènement "loadexception" est indiqué comme obsolète (deprecated) et ne doit donc plus être utilisé.
Voici maintenant comment interpréter le retour en erreur lors de l'appel au service :
function usrException(dataProxy, type, action, options, response) {A noter : dans cet exemple, on traite un cas d'erreur sur lecture du résultat. On utilise l'analyseur d'erreur précédemment évoqué pour interpréter le retour d'erreur de service en JSON et afficher une alerte sur chaque erreur lue.
// alert('usrException type=' + type
// + ' action=' + action
// + ' response.status=' + response.status);
if (type == 'response' && action == 'read' && response.status == 200) {
var rs = errorReader.read(response);
if(rs.records) {
for(var i = 0, len = rs.records.length; i < len; i++) {
var r = rs.records[i];
alert("Erreur de chargement ERR"
+ r.data.id + ":" + r.data.msg);
}
}
} else if (type == 'response' && action == 'read') {
alert("Connexion impossible au serveur ("
+ response.status +")");
}
}
Enfin, il ne manque plus que l'appel à "myStore" permettant de lancer le service :
myStore.load();
Si l'appel au service "getUsers" se passe correctement, alors le store pourra afficher le resultat au sein d'un Ext.grid.GridPanel par exemple, sinon la méthode "usrException" sera invoquée.
Ce mini tutoriel peut sûrement être complété, ou bien si vous avez une autre solution, je suis preneur !
En attendant, à vous de jouer!
1 commentaire:
I finally found my problem, its not json version.
This may seem stupid, but I was working locally on my Desktop and I was doing a Json request to the server (www.domain.com/json.php).
You can create your interface without been on server. But if you use form and submit.
Your website must also be on a server.
Enregistrer un commentaire