Oct 29, 2009, 3:25 PM
Controlling EventMask
Hello everyone! I am writing an ObjectDataSource-driven form and need some help with controlling EventMask.
So I have this form made where the store is linked to an ObjectDataSource. I got the form to load and save, and now I am working on insert functionality.
I get the store to insert new record, load the blank record into the form and when the user enters data and click "Save", I save the record into the store, which in turn invokes save in the ObjectDataSource. The ObjectDataSource inserts the record as a new row, and generates a unique ID. Once the ObjectDataSouce is done saving new row, I have the store reload the record and the form with the new ID, and now the form displays newly created row with unique ID.
Everything works, but my problem lies in locking the user out so they cannot mess with the form while all these things are happening in the background. What I ultimately want is to have EventMask with "Inserting Data..." pop up the moment user clicks "Save" button until the form is loaded with newly created record with the new ID.
I have tried putting EventMask on the store insert, beforesave, save, and load events with various MinDelay value. Many times it ends up that I get either two or more different EventMasks overlap, or there are periods inbetween EventMasks where the form is freed up and the control is returned to the user and then later another EventMask kicks in.
Using mindelay value to control EventMask timing seems silly since delay can vary and often end up eventmasks overlapping, or task ending earlier than expected and causing the form to open up, or eventmask staying up even though everything is done.
Is there a way for me to popup an eventmask anywhere in my code, and take it down when I want?
Here's what my code generally looks like:
So I have this form made where the store is linked to an ObjectDataSource. I got the form to load and save, and now I am working on insert functionality.
I get the store to insert new record, load the blank record into the form and when the user enters data and click "Save", I save the record into the store, which in turn invokes save in the ObjectDataSource. The ObjectDataSource inserts the record as a new row, and generates a unique ID. Once the ObjectDataSouce is done saving new row, I have the store reload the record and the form with the new ID, and now the form displays newly created row with unique ID.
Everything works, but my problem lies in locking the user out so they cannot mess with the form while all these things are happening in the background. What I ultimately want is to have EventMask with "Inserting Data..." pop up the moment user clicks "Save" button until the form is loaded with newly created record with the new ID.
I have tried putting EventMask on the store insert, beforesave, save, and load events with various MinDelay value. Many times it ends up that I get either two or more different EventMasks overlap, or there are periods inbetween EventMasks where the form is freed up and the control is returned to the user and then later another EventMask kicks in.
Using mindelay value to control EventMask timing seems silly since delay can vary and often end up eventmasks overlapping, or task ending earlier than expected and causing the form to open up, or eventmask staying up even though everything is done.
Is there a way for me to popup an eventmask anywhere in my code, and take it down when I want?
Here's what my code generally looks like:
<script runat="server">
[AjaxMethod]
protected void DummyForMask(object sender, AjaxEventArgs e)
{
// This sub does nothing but to invoke Ajax event to bring eventmasking.
// Is there a better way to invoke eventmask without needless Ajax call?
}
<asp:ObjectDataSource ID="TRDataSource" runat="server"
DataObjectTypeName="MyFramework.DataClasses.TroubleReportsData"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="MyFramework.DataSources.TroubleReportsDataSource"
DeleteMethod="DeleteItem" InsertMethod="InsertItem"
UpdateMethod="UpdateItem"
onselecting="TRDataSource_Selecting" onupdating="TRDataSource_Updating">
<SelectParameters>
<asp:Parameter Name="criteria" Type="Object" />
</SelectParameters>
</asp:ObjectDataSource>
<ext:store runat="server" ID="CooliteStoreRequests" DataSourceID="TRDataSource"
GroupOnSort="True" AutoDataBind="true" >
<Reader>
<ext:JsonReader runat="server">
<Fields>
<ext:RecordField Name="TRID"/>
<ext:RecordField Name="System"/>
<ext:RecordField Name="DescriptionSummary"/>
<ext:RecordField Name="Priority"/>
<ext:RecordField Name="DateSubmitted"/>
<ext:RecordField Name="Submitter"/>
<ext:RecordField Name="Phase"/>
<ext:RecordField Name="Description"/>
<ext:RecordField Name="AssignedTo"/>
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Add Handler='function()
{
#{TRPanel}.getForm().updateRecord(#{CooliteStoreRequests}.getAt(0));
#{CooliteStoreRequest}.save();
#{CooliteStoreRequest}.commitChanges();
}'/>
<Save Handler='function()
{
if (#{txtID}.value == null || #{txtID}.value == "") // Reload after saving a newly created record
{
#{CooliteStoreRequests}.reload();
#{TRPanel}.getForm().loadRecord(#{CooliteStoreRequests}.getAt(0));
}
}'/>
<load handler=#{TRForm}.loadData(this.getAt(0));" />
</Listeners>
<AjaxEvents>
<BeforeSave OnEvent="DummyForMask">
<EventMask Msg="Saving Request1..." MinDelay="500" ShowMask="true"/>
</BeforeSave>
<Save OnEvent="DummyForMask">
<EventMask Msg="Saving Request2..." MinDelay="500" ShowMask="true"/>
</Save>
<Load OnEvent="DummyForMask">
<EventMask Msg="Loading Form..." MinDelay="100" ShowMask="true"/>
</Load>
</AjaxEvents>
</ext:store>
<ext:FormPanel FormID="TRForm" ID="TRPanel" runat="server" Title="TR Details"
Width="300" StoreID="CooliteStoreRequests">
<Body>
<ext:formlayout runat="server" StoreID="CooliteStoreRequests" ID="FormLayOutTR" labelAlign="left">
<ext:Anchor><ext:TextField runat="server" FieldLabel="TRID" ID="txtID" DataIndex="TRID" Disabled="true" Cls="x-item-disabled"/></ext:Anchor>
<ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="System" DataIndex="System" ID="txtSystem"/></ext:Anchor>
<ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="Description Summary" DataIndex="DescriptionSummary" ID="txtDescriptionSummary"/></ext:Anchor>
<ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="Priority" DataIndex="Priority" ID="txtPriority"/></ext:Anchor>
<ext:Anchor Horizontal="98%"><ext:TextField runat="server" FieldLabel="Submitter" DataIndex="Submitter" ID="txtSubmitter"/></ext:Anchor>
</ext:formlayout>
</Body>
<Buttons>
<ext:Button runat="server" Text="Insert">
<Listeners>
<Click Handler='function()
{
#{CooliteStoreRequests}.removeAll();
#{CooliteStoreRequests}.insertRecord(0);
}' />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
