Why explodes this window

Question

i have a form loaded with the user data (from Json Store). When i click the first time, the form show good. But, the second time crash :

Firebug says:

Also crash, when i show other form after this form. Any ideas ?

Edit for more info: The code to load form is:

cargarFormularioEdicion: function(idPaciente){
        var store = Ext.create('cp.store.form.Paciente',{});
        store.load({params:{idUsuario: idPaciente}});
        var form = Ext.create('cp.view.form.EditPaciente',{
            action: 'bin/paciente/modificar.php'
        });
        // Ver la forma de pasar este listener al controller
        form.on('afterrender',function(form,idPaciente){
           form.getForm().loadRecord(store.first());
           form.getForm().findField('idUsuario').setValue(idPaciente);
        });
        var win = Ext.create('cp.view.ui.DecoratorForm',{
            aTitle: 'Editar paciente',
            aForm: form
        });
        win.show();
    }

Hypothetical solution: Load the store with async = false.

        var store = Ext.create('cp.store.form.Paciente',{});
        Ext.apply(Ext.data.Connection.prototype, {
                async: false
        });
        store.load({params:{idUsuario: idPaciente}});

Answer 1

Your code does not guarantee that the store is loaded at the time form.getForm().loadRecord(store.first()); is called. Since it is probably not, somewhere in the processing of loadRecord expects tries to access an undefined variable (as your error message shows) and that crashes the javascript execution. That leaves the form component with a broken internal state, and so everything is ugly from there.

You've kind of found that already by loading your store synchronously, but that's really something you should avoid. It wastes processing time by blocking a thread, and probably freeze your application for a few seconds.

The correct way of handling asynchronous events is to pass them a function that they will call back when there done. Hence the name callback function (and the joke "Hollywood principle"). This is efficient and safe.

Since the callback function can be passed in multiple ways, you need to refer to the doc. Taking your code as example, look at the doc for Ext.data.Store#load. Here's how to fix your code elegantly:

cargarFormularioEdicion: function(idPaciente){
    var store = Ext.create('cp.store.form.Paciente');

    store.load({
        params:{idUsuario: idPaciente}

        // here's how to pass a callback to Store#load
        // notice you get access to some useful parameters as well!
        ,callback: function(records, operation, success) {
            if (!success) {
                // the execution will continue from here when the store is loaded

                var form = Ext.create('cp.view.form.EditPaciente',{
                    action: 'bin/paciente/modificar.php'
                });
                // Ver la forma de pasar este listener al controller
                form.on('afterrender',function(form,idPaciente){
                   form.getForm().loadRecord(store.first());
                   form.getForm().findField('idUsuario').setValue(idPaciente);
                });
                var win = Ext.create('cp.view.ui.DecoratorForm',{
                    aTitle: 'Editar paciente',
                    aForm: form
                });
                win.show();
            } else {
                // you need to handle that case
            }
        }
    });
}

Answer 2

Hypothetical solution: Load the store with async = false.

var store = Ext.create('cp.store.form.Paciente',{});
Ext.apply(Ext.data.Connection.prototype, {
        async: false
});
store.load({params:{idUsuario: idPaciente}});