[CLOSED] DirectMethod Timing

[koss]

Hello!
I am having some trouble due to asynchronous nature of DirectMethod call, whereas the most of Extjs events are synchronous.

Basically, I have a form that the user is suppose to fill in the data and hit the save button. When the button is pressed, I make a DirectMethod call to perform a long task and return a value to the store. However, because the DirectMethod takes long time (up to 30 second?), the save kicks in and stores the value before it is returned from DirectMethod.

Here is what my code would look like:

 <script runat="server">
    [DirectMethod]
    public static string Short_Task()
    {
        // Simulates short calculation
        return "Correct!";
    }

    [DirectMethod]
    public static string Long_Task() 
    {
        // Simulates long calculation
        for (var i = 0; i < 500000000; i ++);
        return "Correct!";
    }
 </script>

        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="RecordID" />
                        <ext:RecordField Name="UserData"/>
                        <ext:RecordField Name="CalculatedField1"/>
                        <ext:RecordField Name="CalculatedField2"/>
                    </Fields>
                </ext:ArrayReader>
            </Reader>
            <Listeners>
                <DataChanged Handler="var record = this.getAt(0) || {};#{FormPanel1}.getForm().loadRecord(record);" />
                <Save Handler="var record = this.getAt(0) || {};#{FormPanel1}.getForm().loadRecord(record);" />
                <BeforeSave Handler='var rec=this.getAt(0); Ext.net.DirectMethods.Long_Task({success: function(result) {rec.set("CalculatedField2", result);}});'/>
            </Listeners>
        </ext:Store>

        <ext:FormPanel runat="server" AutoHeight="true" ID="FormPanel1" width="600"
            BodyStyle="padding:10px 5px 5px 10px; text-align: left"
            StoreID="Store1" FormID="MainForm">
            <Content>
                <Anchors>
                    <ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="ID" DataIndex="RecordID" /></ext:Anchor>
                    <ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="User Data" DataIndex="UserData" /></ext:Anchor>
                    <ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="CalculatedField 1" DataIndex="CalculatedField1" Disabled="true"/></ext:Anchor>
                    <ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="CalculatedField 2" DataIndex="CalculatedField1" Disabled="true"/></ext:Anchor>
                </Anchors>
                <ext:Button runat="server" Text="Save First Record" Icon="Disk" >
                    <Listeners>
                        <Click Handler='function()
                                        {
                                            var rec=#{Store1}.getAt(0);
                                            #{FormPanel1}.getForm().updateRecord(rec);
                                            rec.set("result", "Incorrect");
                                            Ext.net.DirectMethods.Short_Task({success: function(result) {rec.set("CalculatedField1", result);}});
                                            #{Store1}.save();
                                        }'/>
                    </Listeners>
                </ext:Button>                        

            </Content>
        </ext:FormPanel>

So when the user clicks save button, Calculated Field 1 is updated and saved (usually). However, Calculated Field 2 is often not saved because the save is executed without waiting for the DirectMethod Long_Task to return a value.

I guess it's the nature of Ajax calls and most people program around this, or use the CallBack. I need to do this as a pre-save processing for other tasks, so I cannot call save from the callback function. Is there any way to delay save until the Long_Task is completed?

Thanks!

[Vladimir]

Hi,

I am not sure why do you perform so many remote requests in the save action? You makes three requests. Why you don't want to use one request (when you call 'save' method the store makes remote request)?

For example, you can use BeforeStoreChanged event of the store makes all required action in that handler (call short task, long task, update fields and ). I see no need to split it into the three request (many requests make additional traffic and load on the server).

But if you still want to use several requests I can suggest the following:
- call 'save' in the success handler of the Long_Task
- remove BeforeSave listener and move that code to the success handler of the Short_Task

Something like this

<Click Handler="
    var rec=#{Store1}.getAt(0);
    #{FormPanel1}.getForm().updateRecord(rec);
    rec.set('result', 'Incorrect');
    Ext.net.DirectMethods.Short_Task({success: function(result) {
        rec.set('CalculatedField1', result);
        Ext.net.DirectMethods.Long_Task({success: function(result) {
            rec.set("CalculatedField2", result);
            #{Store1}.save();
        }});
    }});"/>

Also please note that you don't need 'function(){...}' in the Handler (Handler automatically wraps the code by 'function'). Please remove function wrapping for the Click listener or use Fn instead Handler