Question

Here’s my ExtJs component.
Everything works perfectly…. err well almost everything.
I just don’t get why the this.on('load', function (form,action) {}) is not called whereas the same declaration for this.on('actioncomplete', function (form,action) {}); is called:

DossierPanel = Ext.extend(Ext.form.FormPanel, {
    closable: true,
    autoScroll:true,

    initComponent : function(){
        this.id = 'id_dossier_'+this.id_dossier;
        this.bodyStyle = 'padding:15px';
        this.labelWidth = 150;
        this.items = [{
            layout:'column',
            border:false,
            autoHeight: true,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Civilite ',
                    name: 'CIVILITE',
                    readOnly: true
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Email ',
                    name: 'EMAIL',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            deferredRender: false,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Détails personnels',
                layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',

                items: [{
                    xtype:'datefield',
                    fieldLabel: 'Date de naissance ',
                    name: 'NAISSANCEJMA',
                    format:'d/m/Y'
                }]
            },{
                title:'Adresse',
                layout:'form',
                autoHeight: true,
                defaults: {width: '95%'},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Adresse 1 ',
                    name: 'ADRESSE1'
                }]
            },{
                title:'Téléphone(s)',
                layout:'form',
                autoHeight: true,
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'DescTelephone1 ',
                    name: 'DESCTELEPHONE1',
                    readOnly: true
                }]
            },{
                title:'Divers',
                layout:'form',
                autoHeight: true,
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'ReferenceExterne ',
                    name: 'REFERENCEEXTERNE'
                }]
            }]
        }];
        this.buttonAlign = 'left';
        this.buttons = [{
            text: 'Recharger',
            handler: function() {
                this.getForm().load( {
                  url: '/w.php',
                  params: {
                      id_dossier: this.id_dossier
                  },
                  failure:function(form, action) {
                        handleAjaxError(action.response,'Refresh error');
                  }
                });
            },
            scope: this
        },{
            text: 'Sauver',
            handler: function() {
                this.getForm().submit({
                    url: '/ws.php',
                    params: {
                        write: 1
                    },
                    waitTitle: 'Patientez',
                    waitMsg: 'Sauvegarde',
                    success: function (form, action) {
                      var b = Ext.util.JSON.decode(action.response.responseText);
                      if (b.success==true) {
                          if (b.msg) {
                              Ext.MessageBox.alert('Done!', b.msg);
                          }
                          else {
                              Ext.MessageBox.alert('Done!', 'Saved');
                          }
                      }
                    },
                    failure:function(form, action) {
                        handleAjaxError(action.response,'Refresh error');
                    }
                });
            },
            scope: this
        }];
        //this.listeners = {
        //    actioncomplete: handleActionComplete,
        //    load: handleLoad
        //};
        this.on('load', function (a,b,c) {
            console.log(a);
            console.log(b);
            console.log(c);
        });
        this.on('actioncomplete', function (form,action) {
            if (action.type=='load') {
                console.log('actioncomplete => action load');
            }
        });
        this.on('load', function (form,action) {
            if (action.type=='load') {
                console.log('LOAAAAAD');
            }
        });
        DossierPanel.superclass.initComponent.call(this);
        console.log(this.events)
    }
});

Watch carefully the this.on() code juste above: the console log shows only “‘actioncomplete => action load'”, not the ‘LOAAAAAD’. From my pov this is not normal. Am I missing something?

Thank you very much

Answer 1

The Ext.form.FormPanel do not have a load event. So, even if you define a function for load event, the event is never fired and your function is never executed.

The actioncomplete event is an event of BasicForm and is fired when an action is completed.