What's New?

formpanel update

  1. #1
    Sep 16, 2009, 11:35 AM

    formpanel update

    Hi

    Quick question can a formpanel update a store and if so can somebody give me an example please. I have looked at the 
     #{formpanel1}.getForm().updateRecord()
    but since my javascript is not to good I cannot figure out if this is what I am supposed to use.

    If someone can just point me in the right direction it would be appreciated.

    Thanks
    Richardt
  2. #2
    Sep 16, 2009, 12:30 PM

    RE: formpanel update

    Hi,

    It could go like:

    #{FormPanel1}.getForm().updateRecord(#{Store1}.getAt(i));
    Where i is the record index within the store.

    Wtower
  3. #3
    Sep 17, 2009, 5:01 AM

    RE: formpanel update

    Hi Wtower

    I have tried what you have suggested but it is not committing my changes back to the database. It seems that the updaterecord statement makes the store ready for editing, (I might be wrong) but it does not write the data back to the database. Can the formpanel work like the gridpanel's


    #{GridPanel1}.save(); command which automatically save changes to the database or do you have to write the update statement on the server side.

    Thanks
    Richardt
  4. #4
    Sep 17, 2009, 5:08 AM

    RE: formpanel update

    Hi,

    'updateRecord' just updates record locally (in Store on client-side). To save to the db you need save the store
    Store1.save()
  5. #5
    Sep 17, 2009, 5:45 AM

    RE: formpanel update

    Hello,

    Sure, save is the function for this matter. Alternatively, if you do need to make any changes manually in a server function, you can pass the store with an ajax parameter like:

    <ext:Parameter Name="Detail" Value="Ext.encode(#{StoreDetail}.getRecordsValues(false));" Mode="Raw" />
    Regards,
    Wtower
  6. #6
    Sep 17, 2009, 8:27 AM

    RE: formpanel update

    Thank Vladimir, Wtower

    The two statement together did the trick

    Richardt
  7. #7
    Sep 22, 2009, 8:02 PM

    RE: formpanel update

    Hi.. can you please post your entire page code for the form panel insertion/updation/deletion . I really need this.. Im a newbie to Coolite and javascript..
    Please help !


  8. #8
    Sep 23, 2009, 3:36 AM

    RE: formpanel update

    Hi Luckygal

    So far I got the load, delete, update working without ajax but the insert I havent figured out so I am still using Ajax to do the insert. The Select Command I am doing through ajax.


    


<body>


<form id="form1" runat="server">











<ext:Checkbox runat="server" Hidden="true" ID="chkAdd">


</ext:Checkbox>


<ext:ScriptManager ID="ScriptManager1" runat="server" Locale="en-GB" Theme="Slate" />


<asp:SqlDataSource ID="sqlRef" runat="server" ProviderName="<%$ ConnectionStrings:guest.ProviderName %>"


DataSourceMode="DataReader" >


</asp:SqlDataSource>


<ext:Store ID="stRef" runat="server" DataSourceID="sqlRef" UseIdConfirmation="True">


<Reader>


<ext:JsonReader ReaderID="fineref">


<Fields>


<ext:RecordField Name="fineref" />


</Fields>


</ext:JsonReader>


</Reader>





</ext:Store>


 <asp:SqlDataSource ID="SqlFinesInfo" runat="server" CacheExpirationPolicy="Sliding" 


DeleteCommand="set dateformat dmy; DELETE FROM [Fines] WHERE [FineRef] = @original_fineref AND ([DriverPinCDE] = @original_driverpincde)" 





OldValuesParameterFormatString="original_{0}" 











UpdateCommand="UPDATE [Fines] SET [FineRef] = @fineref, [FineDate] = @finedate, [FineTime] = @finetime, [FineAmount] = @fineamount, [Paid] = @paid, [InvoiceNo] = @invoiceno, [ReducedTo] = @reducedto, [StructureID] = @structureid, [RegistrationNo] = @registrationno, [FineComment] = @finecomment, [ResponsibleParty] = @responsibleparty, [FinePayDate] = @finepaydate, [FineLocation] = @finelocation WHERE [FineRef] = @original_fineref AND [DriverPinCDE] = @original_driverpincde" >


<DeleteParameters>





<asp:QueryStringParameter Name="original_driverpincde" 


QueryStringField="pincde" />


<asp:SessionParameter Name="original_fineref" SessionField="fineref" />


</DeleteParameters>


<UpdateParameters>


<asp:Parameter Name="fineref" Type="String" />


<asp:Parameter Name="finedate" Type="DateTime" />


<asp:Parameter Name="finetime" Type="DateTime" />


<asp:Parameter Name="fineamount" Type="Decimal" />


<asp:Parameter Name="paid" Type="Boolean" />


<asp:Parameter Name="invoiceno" Type="String" />


<asp:Parameter Name="reducedto" Type="Single" />


<asp:Parameter Name="structureid" Type="Int32" />


<asp:Parameter Name="registrationno" Type="String" />


<asp:Parameter Name="finecomment" Type="String" />


<asp:Parameter Name="responsibleparty" Type="String" />


<asp:Parameter Name="finepaydate" Type="DateTime" />


<asp:Parameter Name="finelocation" Type="String" />


<asp:QueryStringParameter Name="original_driverpincde" 


QueryStringField="pincde" />


<asp:SessionParameter Name="original_fineref" SessionField="fineref" />


</UpdateParameters>


 








</asp:SqlDataSource>





<ext:Store ID="StFinesInfo" runat="server" DataSourceID="SqlFinesInfo" ShowWarningOnFailure="False"


UseIdConfirmation="True" >


<Reader>


<ext:JsonReader ReaderID="driverpincde">


<Fields>


<ext:RecordField Name="finedate" />


<ext:RecordField Name="finetime" />


<ext:RecordField Name="fineref" />


<ext:RecordField Name="fineamount" />


<ext:RecordField Name="paid" />


<ext:RecordField Name="invoiceno" />


<ext:RecordField Name="finecomment" />


<ext:RecordField Name="registrationno" />


<ext:RecordField Name="structurename" />


<ext:RecordField Name="structureid" />


<ext:RecordField Name="reducedto" />


<ext:RecordField Name="responsibleparty" />


<ext:RecordField Name="finepaydate" />


<ext:RecordField Name="finelocation" />


<ext:RecordField Name="driverpincde" />


</Fields>





</ext:JsonReader>





</Reader>


<Listeners>





<LoadException Handler="Ext.Msg.alert('Company Structure - Load failed', e.message || e )" />


<CommitFailed Handler="Ext.Msg.alert('Company Structure - Commit failed', 'Reason: ' + msg)" />


<SaveException Handler="Ext.Msg.alert('Company Structure - Save failed', e.message || e)" />


<CommitDone Handler="Ext.example.msg('Update Message', 'Record processing Successful', 4000);" />


<DataChanged Handler="var record = this.getAt(0) || {};#{frmFines}.getForm().loadRecord(record); " />


<BeforeLoad Handler="#{frmFines}.body.mask('Loading...', 'x-mask-loading');" />


<Load Handler="chkdate(#{txtStartDate});#{frmFines}.body.unmask();" />


<LoadException Handler="#{frmFines}.body.unmask();" />





</Listeners>


</ext:Store> 














<ext:ViewPort ID="ViewPort1" runat="server">


<Body>


<ext:BorderLayout runat="server">


<West Collapsible="true" Split="true">


<ext:FormPanel ID="FormPanel1" LabelWidth="120" runat="server" Title="Fine Reference Search"


Width="200">


<Body>


<ext:FormLayout runat="server" ID="frmPanel">


<ext:Anchor>


<ext:Panel ID="Panel3" runat="server" FormGroup="true" Title="Search Fines" Border="false">


<Body>


<ext:FormLayout runat="server" ID="FormLayout1">


<ext:Anchor Horizontal="100%">


<ext:FormPanel runat="server" ID="pnlS" Border="false">


<Body>


<ext:TriggerField ID="txtFines" Width="200" HideLabel="true" AllowBlank="false"


runat="server" EmptyText="Enter Reference/Click to load -->">


<Triggers>


<ext:FieldTrigger Icon="Search" />


</Triggers>


<AjaxEvents>


<TriggerClick OnEvent="LoadRef">


<EventMask ShowMask="true" />


</TriggerClick>


</AjaxEvents>


</ext:TriggerField>


</Body>


<Buttons>


<ext:Button StyleSpec="margin-left:56px" ID="btnLoad" Text="Load" runat="server">


<Listeners>


<Click Handler="StFinesInfo.rejectChanges()" />


</Listeners>


<AjaxEvents>


<Click OnEvent="LoadInfo">


<EventMask ShowMask="true" />





</Click>





</AjaxEvents>





</ext:Button>


</Buttons>


</ext:FormPanel>


</ext:Anchor>


<ext:Anchor Horizontal="100%">


<ext:MultiSelect Hidden="true" SubmitText="true" MultiSelect="false" HideLabel="true"


ID="lstSearch" Width="200" KeepSelectionOnClick="WithCtrlKey" StoreID="stRef"


DisplayField="fineref" ValueField="fineref" runat="server" Legend="Select Reference"


Height="300">


<AjaxEvents>


<Click OnEvent="lstSelect">


</Click>


</AjaxEvents>


</ext:MultiSelect>


</ext:Anchor>


</ext:FormLayout>


</Body>


</ext:Panel>


</ext:Anchor>


</ext:FormLayout>


</Body>


</ext:FormPanel>


</West>


<Center>


<ext:Panel runat="server" Title="Fines Info">


<Body>


<ext:FormPanel runat="server" ID="frmFines" MonitorPoll="500" MonitorValid="true">


<Body>


<ext:FormLayout runat="server" ID="frmF">


<ext:Anchor>


<ext:DateField Format="dd/MM/yyyy" Width="100" DataIndex="finedate" AutoDataBind="true"


FieldLabel="Fine Date" ID="txtFineDate" runat="server" AllowBlank="false" BlankText="Please select a Date">


</ext:DateField>


</ext:Anchor>


<ext:Anchor Horizontal="43%">


<ext:TimeField ID="txtFineTime" DataIndex="finetime" AutoDataBind="true" 


FieldLabel="Fine Time" MinTime="00:01" MaxTime="23:59" Increment="30" AllowBlank="false" BlankText="Please enter or select a time" SelectedTime="09:00" Format="H:mm" runat="server" MsgTarget="Side" EmptyText="Fine Time">


</ext:TimeField>


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TextField ID="txtFineref" DataIndex="fineref" AutoDataBind="true" MaxLength="30"


FieldLabel="Fine Ref" runat="server" AllowBlank="false" MsgTarget="Side" EmptyText="Enter Fine Reference"


BlankText="Fine Reference is required">


</ext:TextField>


</ext:Anchor>


<ext:Anchor Horizontal="50%">


<ext:NumberField ID="txtFineAmount" MaxLength="13" AutoDataBind="true" AllowBlank="false" DataIndex="fineamount"


FieldLabel="Fine Amount" runat="server">


</ext:NumberField>


</ext:Anchor>


<ext:Anchor Horizontal="50%">


<ext:NumberField ID="txtReducedTo" MaxLength="15" AutoDataBind="true" DataIndex="reducedto"


FieldLabel="Reduced To" runat="server">


</ext:NumberField>


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TextArea ID="txtFineComment" FieldLabel="Fine Comment" AutoDataBind="true" DataIndex="finecomment"


Height="50" MaxLength="255" runat="server">


</ext:TextArea>


</ext:Anchor>


<ext:Anchor Horizontal="50%">


<ext:TextField ID="txtRegistrationNo" MaxLength="15" AllowBlank="false" AutoDataBind="true" DataIndex="registrationno"


FieldLabel="Registration No" runat="server">


</ext:TextField>


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TextField Hidden="true" ID="txtStructureId" AutoDataBind="true" DataIndex="structureid"


runat="server" FieldLabel="Top Company Structure" ReadOnly="true" MsgTarget="Side" />


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TriggerField FieldLabel="Company Structure" AutoDataBind="true" DataIndex="structurename"


ID="txtStructureName" MsgTarget="Side" AllowBlank="false" BlankText="Company Structure is required"


runat="server" Width="200">


<Triggers>


<ext:FieldTrigger Icon="Combo" />


</Triggers>


<Listeners>


<TriggerClick Fn="triggerHandler" />


</Listeners>


</ext:TriggerField>


</ext:Anchor>


<ext:Anchor Horizontal="100%">


<ext:TreePanel ID="treeSt" Hidden="true" Title="Select Structure..." runat="server"


Width="300" Height="195" Animate="true" TitleCollapse="true" AutoScroll="true"


Collapsible="true" Collapsed="false" CollapseFirst="true">


<Root>


<ext:AsyncTreeNode NodeID="0" Text="Root" />


</Root>


<Listeners>


<BeforeLoad Fn="nodeLoadSt" />


<Click Handler="&#100;ocument.getElementById('txtStructureName').value = node.text; &#100;ocument.getElementById('txtStructureId').value = node.id; Coolite.AjaxMethods.TreeHid(); " />


</Listeners>


</ext:TreePanel>


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TextField ID="txtResponsibleParty" AutoDataBind="true" DataIndex="responsibleparty"


runat="server" FieldLabel="Responsible Party" />


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TextField ID="txtFineLocation" AutoDataBind="true" DataIndex="finelocation"


runat="server" FieldLabel="Fine Location" />


</ext:Anchor>


<ext:Anchor Horizontal="100%">


<ext:FieldSet runat="server" ID="fldAuth" Title="Pay Information">


<Body>


<ext:FormLayout runat="server" ID="frmAuth">


<ext:Anchor>


<ext:Checkbox runat="server" ID="chkPaid" AutoDataBind="true" DataIndex="paid"


FieldLabel="Paid">


</ext:Checkbox>


</ext:Anchor>


<ext:Anchor>


<ext:DateField Format="dd/MM/yyyy" Width="100" DataIndex="finepaydate" AutoDataBind="true"


FieldLabel="Pay Date" ID="txtfinepaydate" runat="server">


</ext:DateField>


</ext:Anchor>


<ext:Anchor Horizontal="60%">


<ext:TextField ID="txtInvoiceNo" AutoDataBind="true" DataIndex="invoiceno"


runat="server" FieldLabel="Receipt No" />


</ext:Anchor>





</ext:FormLayout>


</Body>


</ext:FieldSet>


</ext:Anchor>


</ext:FormLayout>


</Body>


<Listeners>


<ClientValidation Handler="btnSave.setDisabled(!#{frmFines}.getForm().isValid());chkAdds();chkDelete();" />


</Listeners>


</ext:FormPanel>


</Body>


<Buttons>


<ext:Button ID="btnAdd" Text="Add" Icon="Add" runat="server">


<Listeners>


<Click Handler="#{frmFines}.getForm().reset(); #{chkAdd}.checked = true;" /> 





</Listeners>





</ext:Button>


<ext:Button ID="btnDelete" Text="Delete" Icon="Delete" runat="server">


<Listeners><Click Handler="Ext.Msg.confirm('Delete Record', 'Are you sure?', function(btn) {if (btn == 'yes') {#{StFinesInfo}.remove(StFinesInfo.getAt(0)); #{StFinesInfo}.save();#{frmFines}.getForm().reset();}});" /></Listeners>





</ext:Button>


<ext:Button ID="btnSave" Text="Update" Icon="Disk" runat="server">


<Listeners>


<Click Handler="if (#{chkAdd}.checked == false){#{frmFines}.getForm().updateRecord(StFinesInfo.getAt(0)); StFinesInfo.save();} else { Coolite.AjaxMethods.AddFines();}" />


</Listeners>


</ext:Button>


</Buttons>


</ext:Panel>


</Center>


</ext:BorderLayout>


</Body>


</ext:ViewPort>






</form>


</body>
  9. #9
    Jan 20, 2010, 6:04 PM

    RE: formpanel update

    Hey,

    Thanks a lot for your post. But can you send us the AjaxMethod used to add the record. Since I'm getting a problem to commit the changes from the form panel to the store. My second problem is to update the Store and the formPanel with the new inserted id.


    Thanks a lot.
  10. #10
    Jan 21, 2010, 6:25 AM

    RE: formpanel update

    Hi

    The following is a button on the client side that calls an ajax method on the server side called AddFines

    
ext:Button ID="btnSave" Text="Update" Icon="Disk" runat="server">
<Listeners>
<Click Handler="Coolite.AjaxMethods.AddFines();" />
</Listeners>
</ext:Button>
    Server side code
    


<Coolite.Ext.Web.AjaxMethod()> _


Public Sub AddFines()


 


Try





Dim strSql As String


Dim strPaid As Integer


Dim chkStr As New Generics


Dim updt As New Generics


If chkPaid.Checked Then


strPaid = 1


Else


strPaid = 0


End If




strSql = "INSERT INTO Statement"




dim success As Generics.UpdateVal = updt.Update(strSql, Session.Item("strconR"))


If success.Pass = True Then


Dim mySel As String = "select statement"



'Here i rebind the store to get the new id

SqlFinesInfo.ConnectionString = Session.Item("strcon")


SqlFinesInfo.SelectCommand = mySel


SqlFinesInfo.DataBind()


StFinesInfo.DataSourceID = "SqlFinesInfo"


StFinesInfo.DataBind()





Else


Ext.Msg.Alert("Status", success.Msg).Show()


 


End If


Catch ex As Exception


Ext.Msg.Alert("Status", ex.Message).Show()


End Try


End Sub

Similar Threads

  1. [CLOSED] How to show mask on ajax update panel update
    By egvt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 18, 2012, 9:36 PM
  2. [CLOSED] How to update LabelStyle for TextField inside a FormPanel
    By drkoh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 05, 2011, 2:01 PM
  3. [FormPanel] Buttons dinamically + Before script + User Control + Iterate over all FormPanel's of the window
    By marcoslimagon in forum 1.x Help
    Replies: 0
    Last Post: Nov 17, 2011, 10:53 AM
  4. Values lost after update content of a FormPanel.
    By luiz in forum 1.x Help
    Replies: 0
    Last Post: Apr 29, 2011, 8:05 PM
  5. [0.8] How update a FormPanel into a Window in Javascript ????
    By mojo in forum 1.x Help
    Replies: 0
    Last Post: Oct 15, 2010, 11:28 AM

Posting Permissions