ExtJs et variables locales – fonctions anonymes

J’ai eu à faire face à un problème.
Malgré le fait que j’aie l’impression que la variable soit accessible parce que c’est un accès à l’intérieur de la classe, ça ne fonctionnait pas et l’erreur ressortait systématiquement :
this.writerForm: variable unknown

J’ai mis en gras ci-dessous le code qui pose problème :

Ext.define('Writer.Panel', {
    extend: 'Ext.panel.Panel',

    initComponent: function(){
        this.writerForm = new Writer.Form({
            listeners: {
                create: function(form, data){
                    this.store.insert(0, data);
                }   
            }   
        }); 
        this.writerGrid = new Writer.Grid({
            store: this.store,
            listeners: {
                selectionchange: function(selModel, selected) {
                    this.writerForm.setActiveRecord(selected[0] || null);
                }   
            }   
        }); 
        Ext.apply(this, {
            layout:'border',
            items:[{
                region:'north',
                layout:'fit',
                items: [this.writerGrid]
            },{ 
                region:'center',
                layout:'fit',
                items: [this.writerForm]
            }]  
        }); 
        this.callParent();
    }   
});

La solution est simple : il semblerait que ça soit un hack ExtJs, mais ça fonctionne, et j’espère que je vais vous éviter de perdre autant de temps que moi. Il faut ajouter « scope: this » au code.
J’ai mis en gras ci-dessous le code qui a résolu problème :

Ext.define('Writer.Panel', {
    extend: 'Ext.panel.Panel',

    initComponent: function(){
        this.writerForm = new Writer.Form({
            listeners: {
                create: function(form, data){
                    this.store.insert(0, data);
                }   
            }   
        }); 
        this.writerGrid = new Writer.Grid({
            store: this.store,
            listeners: {
                /* super important pour les fonctions anonymes */
                scope: this,
                selectionchange: function(selModel, selected) {
                    this.writerForm.setActiveRecord(selected[0] || null);
                }   
            }   
        }); 
        Ext.apply(this, {
            layout:'border',
            items:[{
                region:'north',
                layout:'fit',
                items: [this.writerGrid]
            },{ 
                region:'center',
                layout:'fit',
                items: [this.writerForm]
            }]  
        }); 
        this.callParent();
    }   
});

Poster un commentaire

Vous devriez utiliser le HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>