Appel méthode dans Toolbar

Version imprimable

Bonjour,
Je travaille depuis peu en javascript, avec le framework ExtJS 4.2. Je suis plutôt débutant sur cette technologie.
Par analogie avec le C++, je voudrais faire un objet TToolBar générique, à mettre dans une Form. Cette Toolbar est sensée exposer plusieurs boutons destinés à effectuer des opérations sur les enregistrements d'une table (sauver, recharger, premier, suivant, etc ...)
Voici le début de mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Ext.define('TTableToolbar', { extend: 'Ext.Toolbar', GetRecordData : function (button, event) { alert('ca passe !!!! '+button.getId()); }, items: [{ xtype: 'button', id : Ext.tm.erase, text: Ext.tr.erase, handler: GetRecordData, // (1) // handler: this.GetRecordData, // (2) // handler: ownerCt.GetRecordData, // (3) // handler: function(button, event) {alert('ca passe !!!! '+button.getId());},// (4) // handler: function(button, event) {GetRecordData(button, event);}, // (5) cls: 'x-btn-text-icon', icon: '../../../resources/icons/erase.png' },{
Le problème est sur le propriété "handler". J'ai testé 5 écritures, référencées (1) à (5) dans le code ci-dessus.
Le code (3) n'affiche même pas la Form
Les codes (1) (2) et (5) n'affichent pas l'alerte (comme si GetRecordData n'était pas appelée).
Seul le code (4) donne le résultat escompté, mais m'oblige à dupliquer le code sur chaque bouton de la ToolBar (Bonjour la maintenance !)
Le but ultime serait d'appeler la méthode GetRecordData reportée au niveau du container (Form) qui contient à la fois les champs d'enregistrement et la ToolBar.
Si quelqu'un(e) a une idée, et qu'il (qu'elle) veuille bien m'en faire part, qu'il (qu'elle) en soit remercié d'avance.

Kim

C'est dans le contrôleur que tu doit placer ton code à exécuter pas dans la vue
la vue (form)

Code:

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
Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',
 
    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
 
    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);
    }
});

le controller
ici on défini les actions associé au boutons de la vue ('useredit button[action=save]')

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Ext.define('AM.controller.Users', {
    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },
 
    updateUser: function(button) {
        console.log('clicked the Save button');
    }
});

il n'y a donc rien à capitaliser ici où là
la méthode n'existe qu'en un seul exemplaire dans le controleur.

le tutoriel MVC sur le site de sencha est vraiment le pa à pas à réaliser pour comprendre comment ça marche.

la vue définit un alias widget.useredit cet alias sert à référencer les instance de cette vue; La syntaxe "useredit button[action=save]" référence le bouton dont l'action est save dans la vue useredit si ton bouton est dans un toolbar ou directement dans la vue pas de pb il va le trouver.
s'il y en a plusieurs tous exécuterons cette méthode.

A+JYT

14/05/2013, 07h30
kimlee

Appel fonction en local

D'abord, merci sekaijin pour ta réponse.
Elle résout mon problème (enfin, quand j'aurais potassé l'exemple ...) mais ne répond pas à ma question plus générale : comment appeler une méthode d'un objet à partir de cet objet (peut-être suis-je trop imprégné du C++ et que cette question n'a guère de sens ...) ?

D'avance merci

Kim

pour comprendre le mécanisme il faut savoir que JS ne manipule que de références.

ainsi lorsque tu définie une méthode sur un objet first tu ajoute un membre method à cet objet qui est une référence à cette méthode.
si tu affecte à um membre other d'un autre objet second tu affecte la référence à la même méthode.
un peu l'équivalent d'une copie de pointeur sur une fonction en C.

dans l'appel de first.method(), this représente l'objet first. alors que dans l'appel de second.other(), this représente l'objet second.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 first = { value : 45, method : function () { console.log(this.value); } } second= { value : 50, other : first.method } first.method(); // => 45 second.other(); // => 50
Pour appeler la méthode first.method() sur l'objet first depuis l'objet second il faut explicitement référencer celui-ci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 first = { value : 45, method : function () { console.log(this.value); } } second= { value : 50, other : function() { first.method(); } } first.method(); // => 45 second.other(); // => 45
ici otherest une autre méthode qui appelle first.method()A+JYT

14/05/2013, 10h53
kimlee

méthode à toolbar

Merci sekaijin d'avoir pris du temps pour ces explications. C'est en effet une approche différente du C++ qui me perturbe un peu.

Encore merci

Kim