Pouvoir naviguer depuis une fenêtre "détails" ?

**Bruno13** · 28/10/2014, 01h02

Bonjour à tous,

J'ai actuellement un grid dont le onDoubleClick ouvre une fenêtre "détail" (de la ligne sélectionnée).

Je cherche désesperement comment depuis la fenêtre "détail" passer à la ligne suivante de ma grid (next ou previous row)?

Dans ma grille la ligne n'est pas sélectionnée, mais juste focusée, donc le code ci-dessous renvoie vide:

Code :

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

1
2
3
        var myInfGrid = this.getRefmyinfpatentgrid();
        var selectedRecord = myInfGrid.getSelectionModel().getSelection()[0];
        console.log(selectedRecord);

Existe-t-il un équivalent de selectPrevious()/selectNext() mais pour un focus ?

D'avance merci pour vos conseils,

Amicalement
Bruno

**Bruno13** · 28/10/2014, 13h40

Bon je ne sais pas si c'est la solution la plus belle mais j'ai tout simplement sélectionné le brevet sur lequel j'ai double-clické, ensuite j'ai utilisé ce code :

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
onClickNextPatent: function(button) {
        var myInfGrid = this.getRefmyinfpatentgrid();
 
        var store           = myInfGrid.getStore();
        var selModel        = myInfGrid.getSelectionModel();
        var selectedRecord  = selModel.getLastSelected();
        var recordIndex     = store.indexOf(selectedRecord);
        var nextRecord      = store.getAt(recordIndex + 1);
        selModel.select(nextRecord);        
 
        this.application.currentRecord = nextRecord;
        var el = Ext.get("mybibliosheet");
        PatentPulse.TplBiblio.overwrite(el, nextRecord.data);
 
},

**sekaijin** · 29/10/2014, 12h49

ce n'est effectivement pas la meilleure façon de faire.

les bonnes pratiques sont de ne mettre aucun code exécutable dans la vue. Donc pas de onclick dans la vue.
c'est au contrôleur de géré les événement de toutes ses vues.
lorsque tu dbclique sur un élément de ta liste le contrôleur ouvre la fenêtre de détail et y place les valeur de l'élément sélectionné.

lorsque tu clique sur next ou preview dans la fenêtre principale (grid) ou la fenêtre de détail le contrôleur sélectionne l'élément suivant ou précédant dans la fenêtre principale et le place dans la fenêtre de détail.

le contrôleur a nativement accès au store aux vues et il est le porteur du code exécutable il est donc le mieux placé pour permettre les interactions.

dans le guide de sencha tu trouveras

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
Ext.define('AM.controller.Users', {
    ...
    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },
    editUser: function(grid, record) {
        var view = Ext.widget('useredit');
 
        view.down('form').loadRecord(record);
    },
    updateUser: function(button) {
        var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();
 
        record.set(values);
        win.close();
    }
    ...
});

dans cet exemple lors du dblclic sur un élément on appelle la méthode editUser du contrôleur
lorsqu'on clique sur le bouton save on appelle la méthode updateUser qui récupère les valeur du formulaire et les mets en base.

de la même façon tu peux géré un bouton next et preview
par défaut le contrôleur possède les getteur pour accéder au store. si tu a un store Users tu as un getteur getUsersStore.

A+JYT

**Bruno13** · 29/10/2014, 19h07

Bonjour Sekaijin,

Merci pour ces précisions mais juste un petit détail, je n'ai aucune ligne de code dans ma View, tout ce que tu vois se trouve dans le controlleur.

j'ai bien dans ma section init le code suivant

Code :

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

1
2
3
4
5
6
7
 
            'button#btnNextPatent': {
                click: this.onClickNextPatent
            },
            'button#btnPrevPatent': {
                click: this.onClickPrevPatent
            }