forms - 为什么会爆炸这个窗口

Question

我有一个加载了用户数据的表单（来自 Json Store）。当我第一次单击时，表单显示良好。但是，第二次崩溃：

萤火虫 说：

当我在此表单之后显示其他表单时，也会崩溃。有任何想法吗 ？

编辑以获取更多信息：加载表单的代码是：

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();
    }

假设的解决方案：使用 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

您的代码不保证在form.getForm().loadRecord(store.first());调用时加载商店。因为它可能不是，在loadRecord期望处理的某个地方尝试访问一个未定义的变量（如您的错误消息所示），这会使 javascript 执行崩溃。这使得表单组件的内部状态被破坏，所以从那里一切都很丑陋。

您已经通过同步加载商店发现了这一点，但这确实是您应该避免的事情。它通过阻塞线程来浪费处理时间，并且可能会冻结您的应用程序几秒钟。

处理异步事件的正确方法是向它们传递一个函数，它们将在完成后回调。因此名称为回调函数（以及笑话“好莱坞原则”）。这是有效和安全的。

由于回调函数可以通过多种方式传递，所以需要参考文档。以您的代码为例，查看Ext.data.Store#load. 以下是如何优雅地修复代码：

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

假设的解决方案：使用 async = false 加载存储。

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