Mar 31, 2014, 2:55 AM
[CLOSED] Adding a new record to a Store throws an error
Hi,
Please consider the code sample below. The GridPanel is hosted by a DropDownField control. I'm trying to add a new record to the GridPanel's store by clicking the "Add Record" button. When the DropDownField is expanded first, the code executes as expected. A client error is thrown if I click on the "Add Record" button without expanding the DropDownField.
Please consider the code sample below. The GridPanel is hosted by a DropDownField control. I'm trying to add a new record to the GridPanel's store by clicking the "Add Record" button. When the DropDownField is expanded first, the code executes as expected. A client error is thrown if I click on the "Add Record" button without expanding the DropDownField.
<%@ Page Language="C#" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
<!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 runat="server">
<title></title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
var onSelectRecord = function (selectionModel, rowIndex, record) {
var name = record.data.Name;
var desc = record.data.Description;
DropDownField1.collapse();
DropDownField1.setValue(String.format("{0} - {1}", name, desc));
};
var onAddRecord = function () {
var grid = GridPanel1;
var nameId = -1;
var newRecord = new grid.store.recordType({
NameID: nameId,
Name: "Test Name",
Description: "Test Name Description"
});
var records = [];
records.push(newRecord);
grid.store.add(records);
grid.store.commitChanges();
var idx = grid.getStore().find("NameID", nameId);
grid.getSelectionModel().selectRow(idx);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store runat="server" ID="Store1">
<Reader>
<ext:JsonReader IDProperty="NameID">
<Fields>
<ext:RecordField Name="NameID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Description" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:FormPanel runat="server" ID="FormPanel1">
<Items>
<ext:TextField ID="TextField1" runat="Server" Width="300" FieldLabel="Text 1"></ext:TextField>
<ext:CompositeField runat="server" FieldLabel="Dropdown Field 1">
<Items>
<ext:DropDownField ID="DropDownField1" runat="server" Editable="false" Width="300" TriggerIcon="Search">
<Component>
<ext:GridPanel runat="server" ID="GridPanel1" Height="300" StripeRows="true" TrackMouseOver="true"
Frame="true" StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Name" Header="Name" DataIndex="Name" Hideable="false" Width="100" />
<ext:Column ColumnID="Description" Header="Description" DataIndex="Description" Hideable="false" Width="150" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true">
<Listeners>
<RowSelect Fn="onSelectRecord" Buffer="150" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Listeners>
<RowClick Handler="DropDownField1.collapse();" />
</Listeners>
</ext:GridPanel>
</Component>
</ext:DropDownField>
<ext:Button ID="Button1" runat="server" Text="Add Record">
<Listeners>
<Click Fn="onAddRecord" />
</Listeners>
</ext:Button>
</Items>
</ext:CompositeField>
<ext:ComboBox ID="ComboBox1" runat="server" Width="300" FieldLabel="Combo 1">
<Items>
<ext:ListItem Text="Item1" Value="0" />
<ext:ListItem Text="Item2" Value="1" />
<ext:ListItem Text="Item3" Value="2" />
</Items>
</ext:ComboBox>
</Items>
</ext:FormPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Apr 01, 2014 at 4:10 PM.
Reason: [CLOSED]