Sep 01, 2009, 2:52 PM
How do update a form with the auto-generated id after an insert?
In my form, a record is created and sucessfully store in the database. The new id is returned bi the extraParams.
How can I update the DetailsForm with the new Id? This is important because the id has to be re-transmitted to the server, in case of a following update.
Note: This code is taken from the mvc coolite sample CustomerDetails.aspx. I changed it for the use with the AdventureWorks database. In the Customers table the primary key has to be delivered by user, in the Products table
of the AdverntureWorks database the primary key is autogenerated.
How can I update the DetailsForm with the new Id? This is important because the id has to be re-transmitted to the server, in case of a following update.
Note: This code is taken from the mvc coolite sample CustomerDetails.aspx. I changed it for the use with the AdventureWorks database. In the Customers table the primary key has to be delivered by user, in the Products table
of the AdverntureWorks database the primary key is autogenerated.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Register Src="ProductDetailsGeneral.ascx" TagName="ProductDetailsGeneral" TagPrefix="uc1" %>
<%--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var failureHandler = function(form, action) {
var msg = '';
if (action.failureType == "client" || (action.result && action.result.errors && action.result.errors.length > 0)) {
msg = 'Die Daten sind nicht korrekt. Prüfen Sie die rot markierten Felder.';
} else if (action.result && action.result.extraParams.msg) {
msg = action.result.extraParams.msg;
} else if (action.response) {
msg = action.response.responseText;
}
Ext.Msg.show({
title: 'Fehler beim Speichern',
msg: msg,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
var successHandler = function(form, action) {
if (action.result && action.result.extraParams && action.result.extraParams.newID) {
ProductDetailStore.getAt(0).id = action.result.extraParams.newID;
// DOES NOT WORK BECAUSE THERE ARE NO DATA IN THE STORE
//var record = this.getAt(0) ;
//DetailsForm.getForm().loadRecord(record);
// DOES NOT WORK EITHER, THE VALUE IS NOT SHOWED IN THE FORM
// DetailsForm.form.items.item("ProductID").value = action.result.extraParams.newID;
if (ProductDetailStore.getAt(0).newRecord) {
delete ProductDetailStore.getAt(0).newRecord;
}
}
else {
Ext.MessageBox.alert('Success', 'Das Produkt wurde gespeichert!');
}
customerChanged = true;
if (action.options.params.setNew) {
DetailsForm.form.reset();
ProductDetailStore.removeAll();
var rec = new ProductDetailStore.recordType();
rec.newRecord = true;
ProductDetailStore.add(rec);
initUI(true);
}
else {
initUI(false);
}
}
var getProductID = function() {
return (ProductDetailStore.getCount() > 0 && !ProductDetailStore.getAt(0).newRecord) ? ProductDetailStore.getAt(0).id : ''
}
var productLoaded = function(store, records) {
if (records.length > 0) {
DetailsForm.form.loadRecord(records[0]);
}
else {
DetailsForm.form.reset();
}
initUI(false);
ProductPanel.el.unmask();
}
var initUI = function(isNew) {
btnDelete.setDisabled(isNew);
// Will be generated automatically ProductID.setDisabled(!isNew);
ProductID.setDisabled(false);
}
var productSubcategoryRenderer = function(value) {
var r = ProductSubcategoriesStore.getById(value);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.Name;
}
var formatDateTime = function(value) {
return Ext.util.Format.date(value, 'd.m.Y');
}
</script>
<style type="text/css">
.txtProducts-list
{
width: 298px;
font: 11px tahoma,arial,helvetica,sans-serif;
}
.txtProducts-list th
{
font-weight: bold;
}
.txtProducts-list td, .txtProducts-list th
{
padding: 3px;
}
</style>
</head>
<body>
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store ID="ProductSubcategoriesStore" AutoLoad ="true" runat="server" RemoteSort="false" UseIdConfirmation="true">
<Proxy>
<ext:HttpProxy Url="/ProductCoolite/GetSubcategories/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="ProductSubcategoryID" Root="data" TotalProperty="totalCount">
<Fields>
<ext:RecordField Name="ProductSubcategoryID" />
<ext:RecordField Name="ProductCategoryID" />
<ext:RecordField Name="Name" SortType="AsText" SortDir="ASC" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
</Listeners>
<SortInfo Field="Name" Direction="ASC" />
</ext:Store>
<ext:Store ID="ProductDetailStore" runat="server" ShowWarningOnFailure="true">
<Proxy>
<ext:HttpProxy Url="/ProductCoolite/GetProduct/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="ProductID" Root="data" TotalProperty="totalCount">
<Fields>
<ext:RecordField Name="ProductID" Type="Int" SortDir="ASC" DefaultValue="false" />
<ext:RecordField Name="NewDaoName" Type="String" />
<ext:RecordField Name="ProductNumber" Type="String" />
<ext:RecordField Name="MakeFlag" Type="Boolean" DefaultValue="false" />
<ext:RecordField Name="FinishedGoodsFlag" Type="Boolean" DefaultValue="false" />
<ext:RecordField Name="Color" Type="String" DefaultValue="null" />
<ext:RecordField Name="SafetyStockLevel" Type="Int" />
<ext:RecordField Name="ReorderPoint" Type="Int" />
<ext:RecordField Name="DaysToManufacture" Type="Int" />
<ext:RecordField Name="ListPrice" Type="Auto" DefaultValue="null" />
<ext:RecordField Name="ProductLine" Type="String" DefaultValue="null" />
<ext:RecordField Name="Class" Type="String" DefaultValue="null" />
<ext:RecordField Name="Style" Type="String" DefaultValue="null" />
<ext:RecordField Name="SellStartDate" Type="Date" />
<ext:RecordField Name="SellEndDate" Type="Date" DefaultValue="null" />
<ext:RecordField Name="ProductSubcategoryID" Type="Int" DefaultValue="null" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="filter" Value="#{txtFilter}.getValue()" Mode="Raw" />
</BaseParams>
<Listeners>
<BeforeLoad Handler="#{ProductPanel}.el.mask('Lade die Produkte...', 'x-mask-loading');" />
<DataChanged Handler="var record = this.getAt(0) || {};#{DetailsForm}.getForm().loadRecord(record);" />
<LoadException Handler="#{ProductPanel}.el.unmask();" />
<Load Fn="productLoaded" />
</Listeners>
</ext:Store>
<ext:Store ID="ProductsStore" runat="server" ShowWarningOnFailure="true" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="/ProductCoolite/GetProductsPaging/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="ProductID" Root="data" TotalProperty="totalCount">
<Fields>
<ext:RecordField Name="ProductID" />
<ext:RecordField Name="NewDaoName" />
<ext:RecordField Name="ProductNumber" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="filter" Value="#{txtProducts}.getText()" Mode="Raw" />
</BaseParams>
</ext:Store>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:Panel ID="ToolbarsPanel" runat="server" Border="false">
<TopBar>
<ext:Toolbar ID="TopBar" runat="server">
<Items>
<ext:ToolbarButton ID="ToolbarButton1" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{DetailsForm}.form.submit({waitMsg:'Speichern...', params:{id: getProductID()}, success: successHandler, failure: failureHandler});" />
</Listeners>
</ext:ToolbarButton>
<ext:ToolbarButton ID="ToolbarButton2" runat="server" Text="Speichern und Neu" Icon="Add">
<Listeners>
<Click Handler="#{DetailsForm}.form.submit({waitMsg:'Speichern...', params:{setNew: true, id: getProductID()}, success: successHandler, failure: failureHandler});" />
</Listeners>
</ext:ToolbarButton>
<ext:ToolbarButton ID="btnDelete" runat="server" Text="Löschen" Icon="Cross">
<AjaxEvents>
<Click Url="/ProductCoolite/DeleteProduct" CleanRequest="true" Method="POST" Failure="Ext.Msg.show({title:'Fehler beim Löschen',msg: result.errorMessage,buttons: Ext.Msg.OK,icon: Ext.Msg.ERROR});"
Success="customerChanged = true;#{ProductPager}.doLoad(Math.max(0, #{ProductPager}.cursor-1));">
<Confirmation ConfirmRequest="true" Title="Bestätigung" Message="'Datensatz löschen?" />
<ExtraParams>
<ext:Parameter Name="id" Value="#{ProductDetailStore}.getAt(0).id" Mode="Raw" />
</ExtraParams>
</Click>
</AjaxEvents>
</ext:ToolbarButton>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Hidden ID="txtFilter" runat="server" Text='<%# this.ViewData["id"] %>' AutoDataBind='true'>
<Listeners>
</Listeners>
</ext:Hidden>
<ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" />
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<Body>
<ext:FitLayout ID="FitLayout2" runat="server">
<ext:TabPanel ID="ProductPanel" runat="server" Border="false" LayoutOnTabChange="true">
<Tabs>
<ext:Tab ID="tabGeneralDetails" runat="server" Title="General" BodyStyle="padding:6px;">
<Body>
<ext:FitLayout ID="gdFitLayout1" runat="server">
<ext:FormPanel ID="DetailsForm" runat="server" Border="false" Url="/ProductCoolite/SaveProduct/">
<Body>
<ext:FormLayout ID="layDetails" runat="server" LabelWidth="130">
<ext:Anchor>
<ext:NumberField ID="ProductID" AutoDataBind ="true" AutoShow="true" DataIndex="ProductID" runat="server" FieldLabel="ID" AllowDecimals="false" AllowBlank="true" AllowNegative="false" />
</ext:Anchor>
<ext:Anchor>
<ext:Panel ID="gdPanel1" runat="server" Border="false">
<Body>
<ext:ColumnLayout ID="gdColumnLayout1" runat="server">
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="gdPanel2" runat="server" Border="false">
<Body>
<ext:FormLayout ID="gdFormLayout1" runat="server" LabelSeparator="" LabelWidth="130" MsgTarget="Side" AllowBlank="false">
<ext:Anchor Horizontal="95%">
<ext:TextField ID="NewDaoName" runat="server" FieldLabel="Produktname" AllowBlank="false" />
</ext:Anchor>
<ext:Anchor>
<ext:Label ID="gdLabel1" runat="server" FieldLabel="<br/>Produkteigenschaften" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:ComboBox
ID="ProductSubcategoryID"
DataIndex="ProductSubcategoryID"
runat="server"
FieldLabel="Product Subcategory"
Editable="false"
Shadow="Drop"
TypeAhead="true"
Mode="Local"
TriggerAction="All"
ForceSelection="true"
EmptyText="Auswählen..."
ValueNotFoundText="Auswählen..."
StoreID="ProductSubcategoriesStore"
DisplayField="Name"
ValueField="ProductSubcategoryID">
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="ProductNumber" runat="server" FieldLabel="Produktnummer" MsgTarget="Side" AllowBlank="false"/>
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="ProductLine" runat="server" FieldLabel="Product Line" AllowBlank="false" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="Class" DataIndex="Class" runat="server" FieldLabel="Class" AllowBlank="true" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="Style" runat="server" FieldLabel="Style" AllowBlank="true" />
</ext:Anchor>
<ext:Anchor>
<ext:Label ID="gdLabel2" runat="server" FieldLabel="<br/>Lager- und Produktionsdaten" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:Checkbox ID="MakeFlag" runat="server" FieldLabel="Make Flag" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:Checkbox ID="FinishedGoodsFlag" runat="server" FieldLabel="Finished Goods Flag" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="Color" runat="server" FieldLabel="Color" AllowBlank="true" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:NumberField ID="SafetyStockLevel" runat="server" FieldLabel="Safety Stock Level" AllowDecimals="false" AllowBlank="false" AllowNegative="false" MinValue="0" MaxValue="100" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:NumberField ID="ReorderPoint" runat="server" FieldLabel="Reorder Point" AllowDecimals="false" AllowBlank="false" AllowNegative="false" MinValue="0" MaxValue="1000" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:NumberField ID="DaysToManufacture" runat="server" FieldLabel="Days To Manufacture" AllowDecimals="false" AllowBlank="false" AllowNegative="false" MinValue="0" MaxValue="1000" />
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:Panel ID="gdPanel3" runat="server" Border="false">
<Body>
<ext:FormLayout ID="gdFormLayout2" runat="server" LabelSeparator="" LabelWidth="130" MsgTarget="Side" AllowBlank="false">
<ext:Anchor>
<ext:Label ID="Label1" runat="server" FieldLabel="<br/>Verkaufsinformationen" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:NumberField ID="ListPrice" runat="server" FieldLabel="List Price" AllowDecimals="true" AllowBlank="false" AllowNegative="true" DecimalPrecision="2" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:DateField ID="SellStartDate" DataIndex="SellStartDate" runat="server" FieldLabel="Sell Start Date" AllowBlank="false" >
<Listeners>
<Render Fn="formatDateTime" />
</Listeners>
</ext:DateField>
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:DateField ID="SellEndDate" DataIndex="SellEndDate" runat="server" FieldLabel="Sell End Date" AllowBlank="true" >
<Listeners>
<Render Fn="formatDateTime" />
</Listeners>
</ext:DateField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:FormPanel>
</ext:FitLayout>
</Body>
</ext:Tab>
</Tabs>
<BottomBar>
<ext:PagingToolbar
ID="ProductPager"
runat="server"
PageSize="1"
StoreID="ProductDetailStore"
DisplayMsg="Displaying Product {0} of {2}"
/>
</BottomBar>
</ext:TabPanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</ext:FitLayout>
</Body>
</ext:ViewPort>
</body>
</html>
