Discussion :

[Abdes1367]

Presque parfait ! Ca a l'air de marcher.
J'ai essayé la deuxième solution, à savoir le taskrunner dans le controller.
Voici le code complet du controller :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
Ext.define('UserApp.controller.User', {
    extend: 'Ext.app.Controller',
    stores: ['User'],
    views: [
        'user.List',
        'user.Edit',
        'user.Create'
    ],
 
    init: function() {
 
        var myStore = this.getUserStore();
 
        var task = {
            run: function(){
              myStore.load();
            },
            interval: 10000
          }
        var runner = new Ext.util.TaskRunner();
        runner.start(task); 
 
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            },
            'userList': {
                itemdblclick: this.editUser,
                selectionchange: this.selectUser,
            },
 
            'userList button[action=addUser]': {
                click: this.newUser
            },
 
            'userList button[action=delete]': {
                click: this.deleteUserClick
            },
 
            'userEdit button[action=save]': {
                click: this.updateUser
            },
            'userCreate button[action=save]': {
                click: this.createUser
            },
        });
    },
 
    onPanelRendered: function() {
        console.log('The panel was rendered');
    },
 
    selectUser: function(selModel, selections) {
        console.log('select'); 
        var delBut = Ext.ComponentQuery.query('#deleteUser')[0];
        delBut.setDisabled(false);
    },
 
    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
        var view = Ext.widget('userEdit');
        view.down('form').loadRecord(record);
 
    },
 
    newUser: function(button) {
        console.log('Create');
        var view = Ext.widget('userCreate');
        view.down('form');
    },
 
    updateUser: function(button) {
        console.log('clicked the Save button');
            var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();
            var viewEF = form.getForm();
            console.log('view'+ viewEF);
        if (viewEF.isValid()) {
            record.set(values);
            win.close();
            this.getUserStore().sync(); 
        }
    },
 
    createUser: function(button) {
        console.log('clicked the Save button Create');
            var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();
 
        //record.set(values);
        console.log(values);
        this.getUserStore().add(values);
        win.close();
 
        this.getUserStore().sync();
    },
 
    deleteUserClick: function(selModel, selections) {
       // console.log('clicked Delete');
        var viewList = Ext.ComponentQuery.query('#userID')[0];
       // console.log(viewList.getSelectionModel().getSelection()[0]);
        var selection=viewList.getSelectionModel().getSelection()[0];
        if(selection)
        {
            this.getUserStore().remove(selection);
            this.getUserStore().sync();
        }  
    },
 
});

Le seul petit souci qui reste, c'est l'update d'un user. Lorsque j'édite un user, que je le modifie et que je sauvegarde, parfois la mise à jour est prise en compte et parfois non. Dans la console web je vois bien que la méthode POST est appelée parfois et parfois non. On a l'impression que rien ne se passe dans ce dernier cas.

Je ne comprends pas pourquoi.

[Abdes1367]

Complément du dernier post :

Le plus surprenant c'est que dans la console web je constate que les nouvelles valeurs sont bien dans l'objet form. Par contre elles ne sont pas restituées. Se pourrait il que le

Code :

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

record.set(values);

ne fonctionne pas ?

[sekaijin]

trackResetOnLoad

loadRecord

A+JYT

[Abdes1367]

Si j'ai bien compris le trackResetOnLoad est utile lorsque dans un form les valeurs modifiées, par interférence avec d'autres actions, sont considérées comme les valeurs par défaut. Du coup la modification n'est pas prise en compte. C'est exactement le symptôme que j'ai.
Saut que pour l'appliquer ça ne marche pas encore. En effet, il est noté que :

If subclassing FormPanel, any configuration options for the BasicForm must be applied to the initialConfig property of the FormPanel. Applying BasicForm configuration settings to this will not* affect the BasicForm's configuration.

Autrement dit il faut que le trackResetOnLoad soit dans l'initialConfig du FormPanel.
Or dans mon cas, le form est un composant de l'objet window :

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
49
50
51
52
53
54
55
Ext.define('UserApp.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.userEdit',
    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
    modal: true,
 
    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                id:'usuariosEditF',
                items: [
                    {
                        xtype: 'displayfield',
                        name : 'userID',
                        fieldLabel: 'ID'
                    },
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'lastname',
                        fieldLabel: 'Last Name'
                    },
                    {
                        xtype: 'numberfield',
                        name: 'age',
                        fieldLabel: 'Age',
                        maxValue: 150,
                        minValue: 0
                    }
                ]
            }
        ];
 
        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];
 
        this.callParent(arguments);
    }
});

Comment dans ces conditions appliquer le trackResetOnLoad ?

[sekaijin]

l'initialConfig du FormPanel c'est cette partie

Code :

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

1
2
3
4
            {
                xtype: 'form',
                id:'usuariosEditF',
                items: [

Je dirais donc

Code :

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

1
2
3
4
5
            {
                xtype: 'form',
                id:'usuariosEditF',
                trackResetOnLoad: true,
                items: [

A+JYT

[Abdes1367]

Non malheureusement ça ne marche pas. J'ai toujours le même comportement. Parfois les valeurs sont mises à jour et parfois non.
Je suis dessus depuis ce matin et pas de solution !

[sekaijin]

as tu lut les forum sencha sur le sujet ?

A+JYT

[Abdes1367]

J'en ai lu pas mal mais aucun qui répond vraiment à la question.

[Abdes1367]

J'ai compris ce qui se passe.
En fait ce comportement est apparu lorsque j'ai ajouté le Taskrunner. Ce dernier charge le store tous les x secondes. Par ailleurs, lorsque je clique sur le bouton Save de mon formulaire pour sauvegarder mes changements, deux cas peuvent se présenter :
- si on se trouve bien avant ou bien après le passage du Taskrunner, tout se passe bien
- si on se trouve juste avant le passage du Taskrunner, il y a comme une interférence des deux. Les modifications sont prises en compte puis immédiatement effacées par le chargement qu'effectue le Taskrunner.

La solution à mon avis, consiste à stopper le taskrunner juste avant l'action du bouton Save, et le relancer ensuite.

Si je reprends le code de mon Controller posté plus haut, je ferais quelque chose comme :

Code :

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

1
2
3
4
5
6
7
...
'userEdit button[action=save]': {
                runner.stop(task),
                click: this.updateUser,
                runner.start(task),
            },
...

mais la syntaxe n'est pas bonne, ou alors l'emplacement du stop et start ne l'est pas non plus. J'ai tout le temps dans la console l'erreur suivante :

Uncaught SyntaxError: Unexpected token .

L'emplacement indiqué est celui de la ligne du runner.stop(task).

Qu'en penses tu de l'idée, et est ce qu'elle est faisable ?

[sekaijin]

tu ne peux pas mélanger définition d'un objet et code d'une méthode

Code :

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

1
2
3
4
5
{ // ceci est le début de la déclaration d'un objet
  runner.stop(task),      //ceci est une instruction d'une méthode.
  click: this.updateUser, //ceci est l'ajout d'un membre à l'objet.
  runner.start(task),     //ceci est une instruction d'une méthode.
}

tout cela est javascript.

Code :

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

1
2
3
4
5
6
7
8
9
...
'userEdit button[action=save]': {
                click: function () {
                  runner.stop(task);
                  this.updateUser;
                  runner.start(task)
                },
            },
...

par contre attention à la portée des variables il faut que runner et task soient définie à ce moment là.

A+JYT

[Abdes1367]

Avec la syntaxe suivante :

Code :

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

1
2
3
4
5
6
7
'userEdit button[action=save]': {
                click: function () {
                  runner.stop(task);
                  this.updateUser;
                  runner.start(task);
                },
            },

c'est la fonction updateUser qui n'est plus appelée ! la task est bien stoppée puis redémarrée, mais rien ne se passe dans updateUser.
Y a qcq chose qui m'échappe !

[sekaijin]

je pense qu'il te faut ajouter une méthode onUserSave à ton contrôler
et ton contrôle doit faire

Code :

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

1
2
3
'userEdit button[action=save]': {
                click: this.onUserSave,
            },

cette méthode doit appeler successivement

Code :

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

1
2
3
runner.stop(task);
this.updateUser();
runner.start(task)

mais pour ça il faut que le contrôleur connaisse runner et task

je pense que dans la méthode init tu ajoute deux membres à ton contrôleur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
    init: function() {
 
        var myStore = this.getUserStore();
 
        this.task = {
            run: function(){
              myStore.load();
            },
            interval: 10000
          }
        this.runner = new Ext.util.TaskRunner();

et ta méthode

Code :

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

1
2
3
4
5
onUserSave : function(){
  this.runner.stop(this.task);
  this.updateUser();
  this.runner.start(this.task)
}

Avec la syntaxe suivante :

Code :

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

1
2
3
4
5
6
7
'userEdit button[action=save]': {
                click: function () {
                  runner.stop(task);
                  this.updateUser;
                  runner.start(task);
                },
            },

c'est la fonction updateUser qui n'est plus appelée ! la task est bien stoppée puis redémarrée, mais rien ne se passe dans updateUser.
Y a qcq chose qui m'échappe !

il y avait une erreur dans mon code: manque () a l'appel de userUpdate

Code :

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

1
2
3
4
5
6
7
'userEdit button[action=save]': {
                click: function () {
                  runner.stop(task);
                  this.updateUser();
                  runner.start(task);
                },
            },

A+JYT

[Abdes1367]

Ca bloque à présent à la ligne :

Code :

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

1
2
3
...
var win  = button.up('window'),
...

de la fonction updateUser.

Il est mentionné dans la console :

[15:55:25,713] TypeError: button is undefined

Je suis un perdu avec la portée des variables !

[Abdes1367]

Après plusieurs tentaives, ça ne n'a pas l'air de marcher. Il faudra une autre solution.
Ayant navigué dans plusieurs forums il semble que la solution idéale est l'utilisation des websocket, c'est d'ailleurs ce qu'a proposé sekaijin.
Est ce que dans mon cas je peux utiliser la classe Ext.ux.Websocket ?
Quelqu'un l'aurait il déjà implémentée dans une appli ? si c'est le cas son avis et/ou quelques exemples sont les bienvenus.

Merci.

[sekaijin]

si tu regarde le code du handler dans le tuto il prend un paramètre qui est passé à la méthode

Code :

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

1
2
3
4
5
6
7
'userEdit button[action=save]': {
                click: function (button) {
                  runner.stop(task);
                  this.updateUser(button);
                  runner.start(task);
                },
            },

tout simplement

[Abdes1367]

Ca marche !
Merci infiniment sekaijin. Ton aide est précieuse.
Une dernière question avant de clore cette discussion :
Lorsque je fais un :

Code :

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

myStore.load();

c'est toutes les données de la grid qui sont remontées.
Est il possible de ne remonter que le delta ? Par exemple, est il possible d'utiliser l'événement datachanged sur MyStore dans la task de mon controller :

Code :

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

1
2
3
4
5
6
7
8
9
var myStore = this.getUserStore();
        this.task = {
            run: function(){
              myStore.load();
            },
            interval: 10000
          }
        this.runner = new Ext.util.TaskRunner();
        this.runner.start(this.task);

Je me doute un peu de la réponse, mais l'idée est de savoir s'il est possible de ne remonter que le delta.

[sekaijin]

par défaut non
mais on peut toujours surcharger le reader.

par contre pour optimiser un peu ton dev et minimiser les échanges
tu peux trans former ton taskrunner pour faire ceci.
tu défini une url qui réponds par true ou false lorsqu'on lui demande si les données on changées depuis la date passé en paramètre.

tu ajoute une var pour que ta tache invoque cette url en qui donnant la date du dernier appel et garde dans la var la date de cet appel (pour la fois d'après)

lorsque ton ajax reçoit la réponse si les données on changée tu fais un store.load() si elle n'ont pas changé tu ne fais rien.

ainsi la plus par du temps ton appli va demander au serveur si les données on changé et recevoir un false. et tu n'échangera les données avec le serveur que si c'est nécessaire.

A+JYT

[Abdes1367]

L'idée est séduisante mais j'ai "peut être" trouvé mieux.
En cherchant j'ai trouvé cet article qui explique comment charger un seul enregistrement dans un store.
Ce que j'essaye de faire, mais j'y arrive pas encore à cause de la syntaxe, c'est de :
- déclarer une variable idrec qui serait initialisée par exemple à -1
- lorsque j'appelle la fonction updateUser, je récupère l'id de l'enregistrement que je suis en train de modifier.
- Dans la fonction appelée par le taskrunner, je fais passer la valeur de idrec et je fais un if (idrec!=-1) alors myStore.load() tel que exopliqué dans l'article, ensuite je remets idrec à -1. Un peu comme ceci, mais ça ne marche pas pour l'instant :

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
 
...
idrec : -1,
    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
        var myStore = this.getUserStore();
        this.task = {
            run: function(){
              if (idrec!=-1) {
                myStore.load({
                  id: idrec
                  scope:this,
                  callback: function(records, operation, success){
                  if(success){
                    var contact = records[0];
                    idrec = -1;
                    }
                  }
              });
              }
            },
            interval: 10000
          }
        this.runner = new Ext.util.TaskRunner();
        this.runner.start(this.task); 
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            },
...

Est ce que le raisonnement est bon ?

[sekaijin]

je ne comprends bien le but

[Abdes1367]

Excuse moi, je me suis mal exprimé, ou alors j'ai mal compris l'article en question.
Dans un post précédent j'avais posé la question de savoir si on pouvait charger uniquement le delta du store et pas le store en entier.
Tu avais répondu que par défaut on ne pouvait pas le faire, mais qu'on pouvait charger le reader de telle sorte, qu'on ne charge le store (tout le store) que si les données ont changé.
En trouvant l'article cité ci-dessous, je me disais qu'au lieu de charger tout le store, je ne charge que l'enregistrement qui a été modifié. Sachant que le but final c'est de pouvoir mettre à jour plusieurs sessions ouvertes en même temps.
L'article en question, et si j'ai bien compris, explique que pour charger un enregistrement en particulier il faut connaitre son id. Mon idée était de dire, si je récupère l'id de l'enregistrement que je viens de modifier, je n'effectue le chargement du store que sur cet enregistrement. Et comme cela j'évite de charger tout le store.
Ça se tient ou pas ?