Batch Update

I have seen https://examples2.ext.net/#/GridPanel/Update/Batch/ example. working fine.
But without PhantomId(ClientIDProperty) property, it is not assigning the ID.
Give me solution without using ClientIdProperty because in my case it is not possible to use dummy column as ClientIdProperty .

I have tried through following way. but not able to update id and record.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Session["TestPersons"] = null;
}
this.BindData();
}

public class TestPerson
{
public int? Id
{
get; set;
}

public string PhantomId
{
get;
set;
}

public string Email
{
get; set;
}

public string First
{
get;
set;
}

public string Last
{
get;
set;
}
}

//----------------Page------------------------
private List<TestPerson> TestPersons
{
get
{
return new List<TestPerson>
{
new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone"},
new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone"},
new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone"},
new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble"},
new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble"},
new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble"}
};
}
}

private static int curId = 7;
private static object lockObj = new object();

private int NewId
{
get
{
return System.Threading.Interlocked.Increment(ref curId);
}
}

private List<TestPerson> CurrentData
{
get
{
object persons = this.Session["TestPersons"];

if (persons == null)
{
persons = this.TestPersons;
this.Session["TestPersons"] = persons;
}

return (List<TestPerson>)persons;
}
}

private int? AddPerson(TestPerson person)
{
lock (lockObj)
{
List<TestPerson> persons = this.CurrentData;
person.Id = this.NewId;
persons.Add(person);
this.Session["TestPersons"] = persons;

return person.Id;
}
}

private void DeletePerson(int id)
{
lock (lockObj)
{
List<TestPerson> persons = this.CurrentData;
TestPerson person = null;

foreach (TestPerson p in persons)
{
if (p.Id == id)
{
person = p;
break;
}
}

if (person == null)
{
throw new Exception("TestPerson not found");
}

persons.Remove(person);

this.Session["TestPersons"] = persons;
}
}

private void UpdatePerson(TestPerson person)
{
lock (lockObj)
{
List<TestPerson> persons = this.CurrentData;
TestPerson updatingPerson = null;

foreach (TestPerson p in persons)
{
if (p.Id == person.Id)
{
updatingPerson = p;
break;
}
}

if (updatingPerson == null)
{
throw new Exception("TestPerson not found");
}

updatingPerson.Email = person.Email;
updatingPerson.Last = person.Last;
updatingPerson.First = person.First;

this.Session["TestPersons"] = persons;
}
}

private void BindData()
{
if (X.IsAjaxRequest)
{
return;
}

this.Store1.DataSource = this.CurrentData;
this.Store1.DataBind();
}

protected void SaveClick(object sender, DirectEventArgs e)
{
ChangeRecords<TestPerson> persons = new StoreDataHandler(e.ExtraParams["data"]).BatchObjectData<TestPerson>();

foreach (TestPerson created in persons.Created)
{
this.AddPerson(created);

ModelProxy record = Store1.GetById(created.Id);
record.CreateVariable = true;
record.SetId(created.Id);
record.Commit();
created.PhantomId = null;
}

foreach (TestPerson deleted in persons.Deleted)
{
this.DeletePerson(deleted.Id.Value);
Store1.CommitRemoving(deleted.Id.Value);
}

foreach (TestPerson updated in persons.Updated)
{
this.UpdatePerson(updated);

ModelProxy record = Store1.GetById(updated.Id.Value);
record.Commit();
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Grid with AutoSave - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var updateRecord = function (form) {
if (form.getForm()._record == null) {
return;
}

if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form is invalid",
title: "Error"
});
return false;
}

form.getForm().updateRecord();
};

var addRecord = function (form, grid) {
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form is invalid",
title: "Error"
});

return false;
}

grid.store.insert(0, new Person(form.getForm().getValues()));
form.getForm().reset();
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Grid with batch saving</h1>

<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="Person" >
<Fields>
<ext:ModelField Name="Id" Type="Int" UseNull="true" />
<ext:ModelField Name="Email" />
<ext:ModelField Name="First" />
<ext:ModelField Name="Last" />
</Fields>
<Validations>
<ext:LengthValidation Field="Email" Min="1" />
<ext:LengthValidation Field="First" Min="1" />
<ext:LengthValidation Field="Last" Min="1" />
</Validations>
</ext:Model>
</Model>
</ext:Store>

<ext:FormPanel
ID="UserForm"
runat="server"
Icon="User"
Frame="true"
LabelAlign="Right"
Title="User -- All fields are required"
Width="500">
<Items>
<ext:TextField ID="TextField1" runat="server"
FieldLabel="Email"
Name="Email"
AllowBlank="false"
Vtype="email"
AnchorHorizontal="100%"
/>

<ext:TextField ID="TextField2" runat="server"
FieldLabel="First"
Name="First"
AllowBlank="false"
AnchorHorizontal="100%"
/>

<ext:TextField ID="TextField3" runat="server"
FieldLabel="Last"
Name="Last"
AllowBlank="false"
AnchorHorizontal="100%"
/>
</Items>

<Buttons>
<ext:Button ID="Button1"
runat="server"
Text="Save"
Icon="Disk">
<Listeners>
<Click Handler="updateRecord(#{UserForm});" />
</Listeners>
</ext:Button>

<ext:Button ID="Button2"
runat="server"
Text="Create"
Icon="UserAdd">
<Listeners>
<Click Handler="addRecord(#{UserForm}, #{GridPanel1});" />
</Listeners>
</ext:Button>

<ext:Button ID="Button3"
runat="server"
Text="Reset">
<Listeners>
<Click Handler="#{UserForm}.getForm().reset();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Icon="Table"
Frame="true"
Title="Users"
Height="400"
Width="500"
StoreID="Store1"
StyleSpec="margin-top: 10px">
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" Width="40" DataIndex="Id" />

<ext:Column ID="Column2" runat="server" Text="Email" Flex="1" DataIndex="Email">
<Editor>
<ext:TextField ID="TextField4" runat="server" />
</Editor>
</ext:Column>

<ext:Column ID="Column3" runat="server" Text="First" Flex="1" DataIndex="First">
<Editor>
<ext:TextField ID="TextField5" runat="server" />
</Editor>
</ext:Column>

<ext:Column ID="Column4" runat="server" Text="Last" Flex="1" DataIndex="Last">
<Editor>
<ext:TextField ID="TextField6" runat="server" />
</Editor>
</ext:Column>

<ext:CommandColumn ID="CommandColumn1" runat="server" Width="70">
<Commands>
<ext:GridCommand Text="Reject" ToolTip-Text="Reject row changes" CommandName="reject" Icon="ArrowUndo" />
</Commands>
<PrepareToolbar Handler="toolbar.items.get(0).setVisible(record.di rty);" />
<Listeners>
<Command Handler="record.reject();" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>

<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button4" runat="server" Text="Add" Icon="Add">
<Listeners>
<Click Handler="#{Store1}.insert(0, new Person());" />
</Listeners>
</ext:Button>

<ext:Button ID="Button5" runat="server" Text="Delete" Icon="Exclamation">
<Listeners>
<Click Handler="var selection = #{GridPanel1}.getView().getSelectionModel().getSel ection()[0];
if (selection) {
#{GridPanel1}.store.remove(selection);
#{UserForm}.getForm().reset();
}" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">
<Listeners>
<Select Handler="#{UserForm}.getForm().loadRecord(record); " />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>

<Buttons>
<ext:Button ID="Button6" runat="server" Text="Sync" Icon="Disk">
<DirectEvents>
<Click OnEvent="SaveClick">
<ExtraParams>
<ext:Parameter Name="data" Value="#{Store1}.getChangedData({skipIdForNewRecor ds : false})" Mode="Raw" Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>

<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

Give solution without using ClientIdProperty