Timothy,
This is small example demonstrating Store events
<%@ Page Language="C#" %>
<%@ Import Namespace="Coolite.Sandbox.Northwind.Model"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("new Ext.Toolbar({items: [");
sb.Append("{text: 'Add',cls: 'x-btn-text-icon',icon: 'images/add.png',handler: handleToolbar},");
sb.Append("{text: 'Insert',cls: 'x-btn-text-icon',icon: 'images/add.png',handler: handleToolbar},");
sb.Append("{text: 'Delete',cls: 'x-btn-text-icon',icon: 'images/delete.png',handler: handleToolbar,id: 'tb-delete',disabled: true},");
sb.Append("'-',");
sb.Append("{text: 'Load',handler: handleToolbar},");
sb.Append("{text: 'Save',handler: handleToolbar},");
sb.Append("{text: 'Clear',handler: handleToolbar},");
sb.Append("'-',");
sb.Append("'->',");
sb.Append("{text: 'Refresh',cls: 'x-btn-text-icon',icon: 'images/refresh.png',handler: handleToolbar}");
sb.Append("]})");
this.GridPanel1.CustomConfig.Add(new ConfigItem("tbar", sb.ToString()));
}
protected void Store1_BeforeCgange(object sender, BeforeStoreChangedEventArgs e)
{
//The below data contains all changed records which grouping by modification actions: changed, updated, inserted
//string json = e.DataHandler.JsonData
//XmlDocument xml = e.DataHandler.XmlData
//ChangeRecords<Customer> customers = e.DataHandler.ObjectData<Customer>();
//you can add own logic for save using one of above data representation and then set e.Cancel=true for canceling Store events
}
//This handler will be calling for each inserted record
protected void Store1_BeforeInserted(object sender, BeforeRecordInsertedEventArgs e)
{
//e.NewValues - new values
//e.Record - xml represenation of inserted record
}
//This handler will be calling for each changed record
protected void Store1_BeforeUpdated(object sender, BeforeRecordUpdatedEventArgs e)
{
//e.Keys - id column value
//e.NewValues - new values
//e.Record - xml represenation of inserted record
}
//This handler will be calling for each deleted record
protected void Store1_BeforeDeleted(object sender, BeforeRecordDeletedEventArgs e)
{
//e.Keys - id column value
//e.Record - xml represenation of inserted record
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var handleToolbar = function(item, e) {
switch(item.text) {
case 'Add':
var rowIndex = GridPanel1.addRecord();
GridPanel1.getView().focusRow(rowIndex);
GridPanel1.startEditing(rowIndex, 0);
break;
case 'Insert':
GridPanel1.insertRecord(0, {});
GridPanel1.getView().focusRow(0);
GridPanel1.startEditing(0, 0);
break;
case 'Delete':
GridPanel1.deleteSelected();
if (! GridPanel1.hasSelection()) {
Ext.getCmp('tb-delete').disable();
}
break;
case 'Load':
GridPanel1.load();
break;
case 'Save':
GridPanel1.save();
break;
case 'Clear':
GridPanel1.clear();
if (! GridPanel1.hasSelection()) {
Ext.getCmp('tb-delete').disable();
}
break;
case 'Refresh':
GridPanel1.reload();
break;
}
};
</script>
</head>
<body>
<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" ScriptMode="Debug" />
<ext:Store runat="server" ID="Store1" AutoLoad="true" RemoteSort="true"
OnBeforeRecordInserted="Store1_BeforeInserted"
OnBeforeRecordUpdated="Store1_BeforeUpdated"
OnBeforeRecordDeleted="Store1_BeforeDeleted"
OnBeforeStoreChanged="Store1_BeforeCgange">
<Proxy>
<ext:HttpProxy Method="POST" Url="../Shared/CustomerService.asmx/GetAllCustomers" />
</Proxy>
<Reader>
<ext:XmlReader Record="Customer" ReaderID="CustomerId">
<Fields>
<ext:RecordField Name="CustomerId" />
<ext:RecordField Name="CompanyName" />
<ext:RecordField Name="ContactName" />
</Fields>
</ext:XmlReader>
</Reader>
<BaseParams>
<ext:Parameter Name="filter" Value=""/>
</BaseParams>
<WriteBaseParams>
<ext:Parameter Name="filter" Value="qqqqq"/>
</WriteBaseParams>
<SortInfo Field="LastName" Direction="ASC" />
<Listeners>
<LoadException Handler="var e = e || {message: response.statusText}; alert('Load failed: ' + e.message);" />
<SaveException Handler="alert('save failed');" />
<CommitDone Handler="alert('commit success');" />
<CommitFailed Handler="alert('Commit failed\nReason: '+msg)" />
</Listeners>
</ext:Store>
Don't change CustomerID for existin records because CustomerID is key column
<ext:GridPanel runat="server" ID="GridPanel1" StoreID="Store1" Title="Customers" Frame="true" Width="650" Height="450">
<ColumnModel runat="server">
<Columns>
<ext:Column Header="CustomerID" DataIndex="CustomerId" Width="200" Sortable="true" />
<ext:Column Header="Company Name" DataIndex="CompanyName" Width="200" Sortable="true">
<Editor>
<ext:TextField runat="server" ID="txtCompanyName" />
</Editor>
</ext:Column>
<ext:Column Header="Contact Name" DataIndex="ContactName" Width="200" Sortable="true">
<Editor>
<ext:TextField runat="server" ID="txtContactName" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
<SelModel>
<ext:RowSelectionModel SingleSelect="false" runat="server" >
<Listeners>
<RowSelect Handler="Ext.getCmp('tb-delete').enable();" />
<RowDeselect Handler="if (!#{GridPanel1}.hasSelection()) {Ext.getCmp('tb-delete').disable();}" />
</Listeners>
</ext:RowSelectionModel>
</SelModel>
</ext:GridPanel>
</body>
</html>