Echanges entre le datastore et le serveur

**Abdes1367** · 06/11/2013, 10h32

Bonjour,

Etant débutant en Sencha, j'ai encore un peu de mal avec quelques concepts. Notamment la façon dont s'effectuent les échanges entre le datastore et le serveur de base de données.
Comme indiqué dans la FAQ, "Un DataStore est un espace de stockage de données conforme à un modèle. Il permet la lecture et l'écriture de données. Associé à un proxy, il permet les échanges entre le client et le serveur."
Ma question est à ce niveau : Comment s'effectue les échanges entre le client et serveur ? Je me doute qu'une brique en php (par exemple) doit se nicher quelque part, mais où et comment la configurer ?
J'ai lu beaucoup dans la documentation de Sencha, mais je n'ai rien trouvé sur ce point précis. J'ai peut être mal lu ou zappé (surement) des passages. Des explications simples et claires sont les bienvenues.

Merci d'avance pour votre aide.

**sekaijin** · 06/11/2013, 11h11

Bonjour

je te conseille de suivre la doc Datapackage
http://docs.sencha.com/extjs/4.1.3/#!/guide/data
et donc de mettre le proxy dans le modèle.
en effet si tu gère des relation entre modèle ça ne fonctionne pas si tu le mets dans le datastore.

je te conseille aussi de faire entièrement le tuto MVC
http://docs.sencha.com/extjs/4.1.3/#...n_architecture

il y a dedans une partie Saving to the server

sencha te propose plusieurs type de proxy et donc plusieurs façon de discuter avec ton serveur.
celle du tuto utilise JSON

le plus simple est d'utiliser une url statique vers un fichier JSON qui contient la réponse attendue par sencha.

lorsque ta partie ExtJS est au point tu peux définir sur ton serveur PHP des url qui corespondent au requête que t'envois ExtJS et produire le JSON correspondants.

il ne te reste plus qu'a remplacer les url statique par les url dynamique.

tu peux donc facilement faire développer la partie PHP par une autre équipe que la partie JS

A+JYT

**Abdes1367** · 07/11/2013, 10h25

@Sekaijin,

Bonjour et Merci pour ta réponse.
Je vais suivre tes conseils et faire entièrement le tuto MVC (ce que j'ai commencé à faire). J'ai cependant constaté comme une contradiction entre le doc Datapackage et l'exemple dans le tuto MVC. En effet, dans la doc on préconise de mettre le proxy dans le Model (c'est ce que tu expliques aussi). Par contre, dans l'exemple du tuto, le proxy qui permet d'échanger avec le serveur est modifié, certes, mais laissé dans le store.
Il y a certainement différentes façons de faire. Si oui quelle est la meilleure.

Merci.

**sekaijin** · 07/11/2013, 22h17

logiquement je le mettrait dans le store car le proxy est bien un moyen de faire communiquer le store avec la source de donnée.

mais en fait si tu as deux source de donnée qui ont une relation one-one, one-many, many-one, ou many-many si tu mets le proxy dans le store les relations ne fonctionnent plus automatiquement.

je ne sais pas pour quoi. du coup maintenant je suis la doc du data package.
Mais je trouve ça pas très logique.

A+JYT

**Abdes1367** · 09/11/2013, 20h26

Je suis en train de faire le tuto MVC avec Sencha Architect. Je constate que le code produit par Sencha Architect n'est pas exactement identique à celui du tuto. Je bute notamment sur les boutons Save et Cancel du formulaire Edit user. je n'arrive pas avec Sencha Architect à définir les propriétés "action:save" pour le bouton Save et "scope:this,handler:this.close" pour le bouton Cancel. Je ne peux pas non plus les rajouter manuellement car le code est en read only.

Des explications sont les bienvenues.

Merci.

**sekaijin** · 10/11/2013, 12h10

je n'ai pas sencha architect et la version que j'ai eu était lors de sa phase de mise au point 0.xxb donc très loin de ce qu'il est aujourd'hui.

je ne sais pas du tout comment il fonctionne aujourd'hui.
sorry

fans le form useredit du tuto le bouton sont ajouté dans la methode init

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];
 
        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];
 
        this.callParent(arguments);
    }

Il y a un commentaire dans sencha architect qui dit d'utiliser un toolbar.

Envoyé par http://docs.sencha.com/architect/2/#!/guide/views_forms_extjs

You can do without the buttons config of the form panel. To get buttons at the bottom of your form in Sencha Architect:

Add a toolbar to your form panel
Set dock property of toolbar to 'bottom'
Set pack property of toolbar to 'end'
Set ui property of toolbar to 'footer'
Add Submit and Cancel buttons

je ne sais pas si c'est la bonne solution mais c'est à essayer.
A+JYT

**Abdes1367** · 10/11/2013, 12h44

En fait je teste les deux versions : avec Sencha Architect et sans.
Pour la vesrion sans, c'est à dire l'originale, j'y suis presque arrivé. Tout marche correctement sauf le dernier point, celui qui m'intéresse le plus et pour lequel j'ai ouvert cette discussion, à savoir l'échange avec le serveur.
Le tuto montre comment mettre à jour un record dans un fichier updateUser.json. J'ai bien compris que le fichier lui même n'est pas mis à jour tant qu'on n'a pas implémenté la partie serveur. Mais le tuto explique comment tester et voir que ça marche. Il suffit de voir dans la partie "network" des outils développeur du navigateur, et constater qu'il existe une méthode POST contenant le fichier updateUser.json dans son url. Mon problème c'est que je ne vois pas cette méthode, c'est comme si rien ne se passait.
J'ai lu tous les commentaires du tuto et constater que plusieurs ont le même problème. Mais il n y a pas une solution convaincante, ou du moins qui marche.

PS : comme fait on pour mettre du code dans le texte de la discussion.

**sekaijin** · 10/11/2013, 15h41

si tu active les outils de debug de chrome safari ie ou ff
tu as un panel qui t'affiche l'activité réseau.
tu vois donc passer toutes les urls.

dans le tuto MVC seule la partie JS est expliquée.
l'exemple appelle donc ton serveur HTTP en mode POST avec les données du formulaire. dans la requête le serveur lui réponds en envoyant le contenu du fichier updateUser.json telquel tu ne fais qu'envoyé au serveur une requête POST et ton serveur apache lui ne fait que lire le fichier json et te le renvoyer. il est donc normal que le fichier ne soit pas mis à jour. car js s'exécute sur le poste du client. et tu n'a rien fais côté serveur pour traiter cette requete afin qu'elle modifie quoi que ce soit.

je t'ai fais une capture d'écran.

attention ExtJS est intelligent il n'envoie une requête au serveur que si c'est necessaire et non pas à chaque clic sur le bouton save
il faut que tu modifie une donnée pour que l'appel au serveur ait lieu

A+JYT

**Abdes1367** · 10/11/2013, 17h33

OK, j'y suis, même un peu plus! J'arrive à lire, modifier, supprimer ou créer un record. J'ai créé pour chaque opération (read, update, create et delete) un fichier json correspondant. Et je vois pour chaque opération la méthode POST et en réponse le fichier correspondant. OUF !
J'arrive enfin au vif du sujet, à savoir les échanges avec ma base de données.
Je reviens à ma toute première question, et à ta première réponse. Tu disais :

sencha te propose plusieurs type de proxy et donc plusieurs façon de discuter avec ton serveur.
celle du tuto utilise JSON

le plus simple est d'utiliser une url statique vers un fichier JSON qui contient la réponse attendue par sencha.

lorsque ta partie ExtJS est au point tu peux définir sur ton serveur PHP des url qui corespondent au requête que t'envois ExtJS et produire le JSON correspondants.
il ne te reste plus qu'a remplacer les url statique par les url dynamique.

tu peux donc facilement faire développer la partie PHP par une autre équipe que la partie JS

J'ai bien un fichier JSON par opération (read, ...). Cependant qu'entends tu par "la réponse attendue par sencha" ?
Mon idée étant de créer un fichier php par opération. mais d'où faut il l'appeler ?
Peux tu stp développer cette partie ? C'est encore un peu confus dans ma tête.

Merci.

**sekaijin** · 11/11/2013, 11h45

Ok maintenant que tu as quelque chose d'opérationnel côté ExtJS
il te faut travailler côté server.

le plus simple est de faire comme tu le dit un fichier php par opération.
Mais si tu maitrise un peu php tu peux utiliser un seul script (ZendFramework permet ça)

disons que tu as côté serveur un script par opération:
http://monserveur/monappli/user/read.php,
http://monserveur/monappli/user/create.php,
http://monserveur/monappli/user/update.php,
http://monserveur/monappli/user/delete.php.

ton script read.php doit lire les données en base et retourner quelque chose comme

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
    success: true,
    users: [
        {id: 1, name: 'Ed',    email: 'ed@sencha.com'},
        {id: 2, name: 'Tommy', email: 'tommy@sencha.com'}
    ]
}

il doit aussi traiter les paramêtres _GET[].
le premier truc à faire est de traiter correctement la réponse.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//la réponse à fournir est une hash map encodé en json
//contenant le membre "success" qui est un booléen,
//et le membre "user" qui est un tableau
header('Content-Type', 'application/json; charset=UTF-8');
$response = array(
    'success' => true,
    'users' =>  array();
);
 
//ici on va traiter les params requeter la base et placer une ligne par enregistrement
//dans $response['user']
//if ($errorSQL) {
//  $response['success'] = false;
//} else {
    $response['user'].push(array('id' => 1, 'name' => 'Ed',    'email' => 'ed@sencha.com'));
//}
 
echo utf8_encode(json_encode($response));

Si tu appelle cette url dans ton navigateur tu dois obtenir quelque chose comme le contenu de ton fichier json.
il ne te reste plus qu'a ouvrir ton fichier js où tu as mis ton proxy et remplacer l'url user.json par /monappli/user/read.php en ouvrant ton appli extjs tu dois voir tes données arriver.
si tu tri tes colonnes dans ta grid et que tu as mis l'option remoteSort à true. tu dois voir passer des requêtes et tes donner se recharger. les paramêtres de tri se retrouvent dans php dans _GET. il en vas de même si tu a mis en place la pagination et les filtres. il te faut donc adapter ton script pour qu'il prenent en compte ces paramtres dans la requête.

il te faut faire pareil avec les autres scripts create update et delete. la différence est que tu reçois les données dans _POST.

Comme tu peux le voir dans ce début de script la structure de la réponse est l'image du fichier json correspondant. Extjs attend exactement cette structure json. si respecte pas la structure json de la réponse extjs sera incapable de comprendre cette réponse et les données ne serons pas chargées.

le plus simple est de prendre le fichier json et de créer une map lorsqu'il s'agit de {} et au array lorsqu'il s'agit de []. Le json_encode s'occupe de tout pour en faire une réponse json.

attention à l'encodage de l'application et des réponses json. perso je fais tout en utf-8
mais si tu mixte l'appli dans un encodage (entête du html), les script js dans un autre, les script php avec le leur et les réponse json avec un encodage il te faudra être très vigilant pour ne pas avoir de caractère bizares.

A+JYT

**Abdes1367** · 11/11/2013, 22h09

J'avais trouvé hier à peu de chose près la même explication en cherchant. J'arrive donc à lire, mettre à jour, supprimer ou ajouter dans mon tableau tout en échangeant avec ma base de données.
La dernière ligne droite qui me reste est la suivante : mettre à jour mon tableau sans recharger la page. En effet les données peuvent être mises à jour depuis la base de données ou par un autre utilisateur. Comment faire en sorte que mon tableau se mette à jour sans recharger la page ?
Je pose la question en même temps que je recherche.

**abraxis** · 12/11/2013, 10h47

Bonjour,

Pour mettre à jour un tableau tu peux utiliser le reload() sur le store de ton tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monStore.reload();

**sekaijin** · 12/11/2013, 12h47

ajoute la tool bar à ton grid avec l'action par défaut reload
ainsi ton utilisateur peux recharger les données à la demande

un bon exemple dans sencha sur le grid et le pagination

A+JYT

**Abdes1367** · 12/11/2013, 16h56

J'ai encore du mal avec la syntaxe.
Bref, le code monStore.reload() est à mettre dans le fichier List.js définissant la grid ? ou dans le fichier monStore.js ?
Peux tu stp me donner un exemple d'un fichier .js où ce code est inséré ?

Par contre j'ai mal compris ton dernier post à propos de l'action reload de la toolbar. Ma demande concerne le refresh du tableau sans reloading manuel. Exemple : on fait une modification directement en base de données. Cela entrainerait automatiquement le refresh du tableau. C'est bien à cela que répond le code monStore.reload() ?

Merci.

**sekaijin** · 12/11/2013, 17h34

ce que dit @abraxis c'est que la méthode reload sur un store permet de recharger les données.

je disais pour ma part que tu peux facilement mettre en plave une toolbar dans ton grid qui offre un bouton recharger comme dans l'exemple
http://docs.sencha.com/extjs/4.2.1/e...id/paging.html

pour recharger sur sollicitation du serveur c'est plus compliqué

pour arriver à faire ça il faut que ton serveur sache qui est connecté et comment lui envoyer l'info.

la solution la plus efficace est d'ouvrir une websocket et d'y associer un handler.
lorsque le serveur doit notifier un utilisateur il envoie la notif dans le websocket.
il suffit de mettre dans les données {"updateUser" : "2013/11/12 17:27:56"}
le handler est alors activé. il lit le json en comprends que les données user on changé il fait alors un user.reload();

cela implique de savoir gérer les websocket, de détecter côté serveur lorsqu'un abonné à quitté la session sans prévenir.

la méthode la plus facile consiste à garder dans une table la date et l'heure de la dernière mise à jour de chaque table.

du coté js tu met un Ext.util.TaskRunner celui-ci toute les x minutes ou seconds envoie une requête ajax pour consulter cette table avec la date et l'heure de la dernière consultation. le serveur lui retourne la liste de ce qui a changé depuis
lorsque ajax reçois la réponse il sait quel datastore il doit recharger.

A+JYT

**Abdes1367** · 12/11/2013, 22h06

@sekaijin : Oups ! j'ai même pas constaté qu'il y avait un "intrus" dans notre discussion

. Merci à @abeaxis quand même.

J'ai pas tout compris à ta réponse, mais j'ai compris le principe, qui semble tout à fait logique : si le serveur ne donne pas l'info au client celui ci ne peut pas le deviner.
Je vais essayer d'implémenter la solution que tu proposes, même si pour l'instant je maitrise pas tout.

Merci.

**Abdes1367** · 13/11/2013, 11h41

Et si on rechargeait le store et rafraichissait la grid toutes les x secondes. J'ai découvert les deux méthodes suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
Ext.getCmp('gridID').getStore().load();
Ext.getCmp('gridID').getView().refresh();

Je l'ai testé et ça marche.
J'ai procédé de la façon suivante.
Dans le controler, dans l'event render de la fonction init :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
...
init: function() {
 
        this.control({
            'userList': {
                itemdblclick: this.editUser,
                selectionchange: this.selectUser,
                render: this.updateGrid
            },
 
           ...    },
...
updateGrid: function() {
    makeInterval = setInterval(function() {
        Ext.getCmp('gridID').getStore().load();
        Ext.getCmp('gridID').getView().refresh();
    }, 5000);
}

MAIS (il y a toujours un "mais") je n'arrive plus à mettre à jour un record. C'est à dire que lorsque je double-clique sur une ligne de la grid, ça m'ouvre un petit formulaire avec mes champs éditable. Je pouvais modifier mes données et cliquer ensuite sur Save. La grid se mettait à jour instantanément. Plus maintenant.

**sekaijin** · 13/11/2013, 20h47

Je te conseille de regarder le TaskRunner pour exécuter une tache de fond.
ça évite de bricoler le contrôler.

enfin pour accéder à ton datastore deouis le controleur tu as un getter pour ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
Ext.define('App.controller.Books', {
        extend: 'Ext.app.Controller',
        stores: ['Books'],
        init: function () {
            this.getBooksStore().loadData();
...

donc pour toi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        init: function () {
            this.getGridID().loadData();

tu peux aussi utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 this.getStore('gridID');

dans la tache de rechargement il ne faut recharger que les data dans le store. et pas s'occuper de l'interface. (grid)

normalement si le store change le grid est mis à jour automatiquement.
si tu dois tout de même exécuter des traitement lorsque le datastore est rechargé alors il faut le faire sur l'événement du data store et non dans la méthode de rechargement.
pour gérer les événement du datastrore tu peux t'inspirer de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Ext.define('sample.controller.Main', {
    extend    :  'Ext.app.Controller',
    models    :  ['MainStore'],
    stores    :  [' MainStore '],
    views     :  ['Main'],
    requires  :  ['Ext.MessageBox'],
    init: function() {
 
        //ajouter des listener sur les événement du datastore.
        Ext.getStore('MainStore').addListener('load', this.onMainStoreLoad, this);
        Ext.getStore('MainStore').addListener('datachanged', this.onMainStoreDataChange, this);
 
        this.control({
            //  A sample combo box select function
            'combo[action=sampleSelect]':{
                select:this.onComboSelect
            },
            //  A sample button click function
            'button[action=sampleAction]':{
                click:this.onButtonClick
            }
        });
    },
 
    // This is where all the functions go
 
    onComboSelect: function(combo) {
          console.log('ComboBox Selected, the value is:' + combo.getValue()) ;
    },
 
    onButtonClick: function(me){
    console.log('Button Clicked');
    },
 
    onMainStoreLoad: function(me,records,success){
    if(!success){
     Ext.MessageBox.show({
        title   : 'Data Load Error',
        msg   : 'The data encountered a load error, please try again in a few minutes.'
                });
            }
    },
 
    onMainStoreDataChange: function(me){
    console.log('Hey the store data just changed!');
    }
 
});

A+JYT

**Abdes1367** · 13/11/2013, 23h26

OK j'ai regardé le taskrunner et tu as raison ça parait l'outil adéquat.
Je pourrais implémenter quelque chose comme :

var task = {
run: function(){
monStore.load();
},
interval: 10000
}
Ext.TaskMgr.start(task);

Mais j'ai encore du mal à me situer. Ce code il va où? dans le controler.js, dans monStore.js ? ... puisque c'est une tâche de fond, je dirais que ça se met dans le controler.js, mais tu dis justement :

Je te conseille de regarder le TaskRunner pour exécuter une tache de fond.
ça évite de bricoler le contrôler.

Alors je ne sais pas.

**sekaijin** · 14/11/2013, 12h44

tu peux le mettre directement dans le store

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     },
    listeners: {
        'load': {
            fn:  function(me,records,success){
              if(!success){
                Ext.MessageBox.show({
                  title   : 'Data Load Error',
                  msg   : 'The data encountered a load error, please try again in a few minutes.'
                });
              }
            }
        }
    },
     autoLoad: true
 });

ou dans le controller. comme dans mon exemple précédent.
quand je dis bricoler le controller je voulais dire éviter de passer par le render d'un élément pour déclancher une méthode d'init

quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Ext.define('App.controller.Books', {
        extend: 'Ext.app.Controller',
        stores: ['Books'],
        init: function () {
          var monStore = this.getBooksStore()
          monStore.addListener('load', this.onBooksStoreLoad, this);
          monStore.addListener('datachanged', this.onBooksStoreDataChange, this);
          var task = {
            run: function(){
              monStore.load();
            },
            interval: 10000
          }
          Ext.TaskMgr.start(task);
        },
 
        onBooksStoreLoad: function(me,records,success){
          if(!success){
            Ext.MessageBox.show({
              title   : 'Data Load Error',
              msg   : 'The data encountered a load error, please try again in a few minutes.'
            });
          }
        },
 
        onBooksStoreDataChange: function(me){
          console.log('Hey the store data just changed!');
        }
...

A+JYT

Echanges entre le datastore et le serveur

Ext JS / Sencha

Discussions similaires

Partager

Partager