ExtJS 4.1：模态窗口似乎在提交窗口之前返回控制

Posted 2023-02-26

【中文标题】ExtJS 4.1：模态窗口似乎在提交窗口之前返回控制

【英文标题】：ExtJS 4.1: Modal Window seems to return control before submitting the window

【发布时间】：2013-07-23 07:13:09

【问题描述】：

我不确定如何在问题标题中描述我的问题。但这是我的问题：

(a) 当我双击 Ext.grid.Panel 中的一行时，我会打开一个模式窗口，其中包含更新记录的相关详细信息。

(b) 在进行必要的修改并关闭模式窗口后，我想返回到 Grid 并过滤特定代码的 Grid，即 selectedSalesOrderNum。

jobSlotsGrid.on('celldblclick', function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts)
    modalStatus = loadWindow();
    jobSlotStore.filterBy(function(rec) 
        alert('Filtering data');
        return  rec.get('salesOrderNum') === selectedSalesOrderNum;
    );
);

(c) 下面是创建模型窗口的函数。它还调用了 submitCreateJobSlotHandler() 方法，该方法基本上保存更改并使用所有数据重新加载原始 Grid。 （因此有必要使用特定代码过滤它，即 selectedSalesOrderNum ）。

function loadWindow()

        getAllTabsForEditJobSlot();   
        var createJobSlotWin = new Ext.Window(
        id:'salesOrder-win-jobSlot',
        applyTo     : 'hello-win',
        modal       : true,
        layout      : 'fit',
        width       : 900,
        height      : 500,
        closeAction :'destroy',
        plain       : true,
        model       : true,
        stateful    : false,
        title       :'Create Job Slot',
        items       : [editJobSlotInformationPanel],
        buttons     : [
        text        : 'Save',
        handler     : function()
            submitCreateJobSlotHandler();           
            //createJobSlotWin.destroy();
                
        ,
        text     : 'Close',
        handler  : function()
        createJobSlotWin.destroy();
        
        ] 
    );
        createJobSlotWin.show();    

问题：

在第一个代码块中，只要调用 loadWindow 方法，就会弹出一个模态窗口以及 filterBy 代码并行执行并显示警报（“过滤数据”）。然后我在模态中输入数据并保存。因此，基本上，在模态保存/关闭之后不会进行过滤。加载模态窗口后立即到达代码（ if/else ）。就好像，模态窗口打开并转到下一行代码，同时等待用户稍后对模态窗口执行一些操作。

希望我的问题很清楚。谁能告诉我如何处理这个问题？

编辑：

我现在想得越多，我猜 loadWindow() 方法只是创建了模态窗口，因为我们只是有一个新的 Ext.Window() 调用，并且不会打扰模态框内的其他用户操作并返回控制。因此，立即执行后续的 filterBy 事件。在这种情况下，我想在模式窗口中保存重新加载商店后过滤商店。模态窗口的保存有这个处理程序代码：

function submitCreateJobSlotHandler () 
    alert('Into Submit');
    var formPanel = Ext.getCmp('salesOrderJobSlotForm');
    formPanel.getForm().submit(
        url : 'someUrl',
        method : 'POST',
        success : function() 
            alert('Success');
            jobSlotStore.load(
                scope : this,
                url : 'salesOrderJobSlot/listJSON'
            );
            jobSlotStore.filterBy(function(rec) 
                alert(rec.get('salesOrderNum')+"--"+selectedSalesOrderNum)
                return  rec.get('salesOrderNum') === selectedSalesOrderNum;
            );
        ,
        failure : function() 
            alert('PSO save failed!');
        

    );

但这里的问题是，jobSlotStore.load() 虽然被调用，但它一直保持到 filterBy 被执行。因为，我看到警报一一出现，然后在所有警报完成后，商店加载。因此，filterBy 会被“延迟”存储加载覆盖。

对以任何方式处理该问题有任何建议吗？

【参考方案1】：

存储加载是异步的，您需要等待它完成才能过滤客户端上的数据集：

store.on('load', function() 
    store.filter();
, null, single: true);
store.load();

【讨论】：

谢谢埃文。我意识到这是一个异步调用，并使用回调属性来获取加载的结果，然后过滤网格。它也有效。