CODEWITHSUNDEEP
extjsextjs4.1
rajugaadu
rajugaadu

Reputation: 704

ExtJS 4.1: Modal Window seems to return control before submitting the window

I wasn't sure how to describe my question in the question title. But here is my problem:

(a) When I double click on a row in an Ext.grid.Panel, I open a modal window with it's relavant details to update the record.

(b) After I make the needed modifications and close the modal window, I want to return to the Grid with the Grid filtered on a certain code i.e 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) Below is the function, which creates the model window. It also has the call to method submitCreateJobSlotHandler() which basically saves the changes and reloads the original Grid with all the data. ( Hence the necessity to filter it back with a certain code i.e 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();    
}

The Issue:

In the first block of code, as soon as the loadWindow method is called, both a modal window is popped up along with the filterBy code getting executed in parallel and showing up the alerts ( 'Filtering data' ). I then enter the data in the modal and save. So, basically, the filtering is not done after the Save/Close on Modal. The code ( if/else ) is immediately reached after loading the modal window. It is as if, the modal window opens and goes to the next line of code while waiting for the user to perform some action on the modal window later.

Hope I am clear on my question. Could anyone please advice how do I handle this?

EDIT:

The more I think about it now, I guess the loadWindow() method just creates the Modal Window as we just have a new Ext.Window() call and doesn't bother about other user actions inside the modal and returns the control. And hence, executes the subsequent filterBy event immediately. In that case, I want to filter the store after I am reloading the store upon the Save in Modal Window. The save on Modal window has this handler code:

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!');
        }

    });
}

But the issue here is, the jobSlotStore.load() though gets called, it holds until the filterBy gets executed. Because, I see the alerts coming up one by one and then after all the alerts are done, the store loads. So, the filterBy gets overriden by the 'late' store load.

Any suggestions to deal with the issue in any of the ways?

Upvotes: 0

Views: 833

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

The store load is asynchronous, you need to wait til it completes before you can filter the data set on the client:

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

Upvotes: 2

Related Questions