Discussion :

[solo190]

bonjour à tous,
dans l'optique de respecte la logique MVC , je pense que les evenements sont ecris dans le controleur et non dans la vue.
j'essaye de respecter cette logique mais je suis buté car voici mon 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
16
17
18
19
20
21
22
 items: [
            { allowBlank:false, fieldLabel: 'User ID', name: 'user', emptyText: 'user id' },
            { allowBlank:false, fieldLabel: 'Password', name: 'pass', emptyText: 'password', inputType: 'password' },
            { allowBlank:false, fieldLabel: 'Verify', name: 'Verify', emptyText: 'password', inputType: 'password', 
            // allowBlank:false  impute que le champ Requière au moins une valeur
            listeners: {
                        specialkey: 													
                                function(field, e)	{
                                if (e.getKey() == e.TAB) {
                                                            alert('oui'); 
                                                        }
                                                }
            }
        },
            {
                xtype: 'combobox', fieldLabel: 'State', name: 'state', 
               store: Ext.create('KitchenSink.store.States'), valueField: 'abbr', displayField: 'state',
                typeAhead: true,
                 queryMode: 'local',
                emptyText: 'Select a state...'
                }
            ]

ceci fonctionne sans problème mais lorsque je veux retirer cette fonction pour l'ecrire dans mon controleur bonjour les problèmes.
voici ce que je fais,
je transforme ma vue ainsi

Code :

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

1
2
3
4
5
6
7
8
 listeners: {
                        specialkey: 													
                                function(field, e)	{
                                if (e.getKey() == e.TAB) {
                                                            salutation ; 
                                                        }
                                                }
            }

et dans mon controleur j'ajoute ceci

Code :

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

1
2
3
  salutation : function(){
                                alert('oui');
    }

voici le message d'erreur que j'obtiens :

Uncaught ReferenceError: salutation is not defined

Merci de votre aide !

[sekaijin]

Juste une petite erreur de compréhension.

le contrôleur est un objet observable (il génère lui-même des événements)
En tant qu'objet observable, on peut lui associer des listeners pour réagir à ces événements.
=> attribut listeners

mais le contrôleur est là pour gérer les événements des vues qui lui sont associées
et pour cela, il faut lui indiquer ce qu'il doit contrôler
cela se passe dans l'init du contrôleur

Code :

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

1
2
3
4
5
6
7
    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

Ici on contrôle le rendu du panel qui est dans le viewport.
plus classique

Code :

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

1
2
3
4
5
6
7
    init: function() {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },

On contrôle dans la vue userlist le double click sur un élément de la grille
Notes, qu'a chaque fois on passe une référence à une méthode du contrôleur.
c'est la meilleure façon de faire.
tu trouveras expliqué en détail ce fonctionnement ici
http://docs-origin.sencha.com/extjs/...n_architecture

Il est vrai que la doc est un peu trompeuse sur ce sujet.
en effet dans la doc sur le contrôleur on trouve un élément de config "listener" et dans celui-ci

Code :

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

1
2
3
4
5
6
7
8
9
10
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }

On pourrait alors penser que le contrôleur gère le click sur l'élément el
Mais en fait en regardant de plus près on s'aperçoit que cette partie de la doc est hérité de
http://docs-origin.sencha.com/extjs/...til.Observable
Qui est une partie générique sur tout ce qui est observable.
en fait dans la même doc sur le contrôleur on trouve
http://docs-origin.sencha.com/extjs/...method-control
Qui est la partie spécifique au contrôle.

La doc ExtJS est riche et comme toujours la lecture de l'API n'est pas suffisante pour comprendre comment se servir des objets. C'est pour ça que je renvoie souvent les développeurs vers les guides.

A+JYT