PDA

View Full Version : GridPanel Store and AjaxEvents



Timothy
Sep 08, 2008, 2:09 PM
Quick question,

If I have a store with the following:



<ExtJS:Store ID="Documents"
runat="server"
AutoLoad="True"
RefreshAfterSaving="Auto">
<Reader>
<ExtJS:JsonReader ReaderID="DocumentId">
<Fields>
<ExtJS:RecordField Name="DocumentId" />
<ExtJS:RecordField Name="Created" Type="Date" />
</Fields>
</ExtJS:JsonReader>
</Reader>
<AjaxEvents>
<Save OnEvent="Documents_Save">
<UserParams>
<ExtJS:Parameter Name="DocumentId" Value="{DocumentId}" />
</UserParams>
</Save>
</AjaxEvents>
<Listeners>
<CommitDone Handler="this.reload();" />
<SaveException Handler="Ext.MessageBox.alert('Failure', 'Failure saving document; please contact administration');" />
</Listeners>
</ExtJS:Store>


Shouldn't it pass my DocumentId to the Documents_Save function on Save?

I'm using the following to add:



dgDocuments.addRecord( { 'DocumentId' : 1 } );


Cheers,
Timothy

Vladimir
Sep 08, 2008, 2:41 PM
Hi Timothy,

I am not sure that I correct understood your example.

First, the Save event firing after receiving save response by the Store (before handling the response).
Value="{DocumentId}" - what you want with this? The {DocumentId} will be rendered as raw.
Do you have DocumnentId js variable? If not then js error occurs.

May be you clarify what you need and then we can suggest solution for you

geoffrey.mcgill
Sep 08, 2008, 6:48 PM
Hi Timothy,

This is just a quick update to let you know we're making a sample for you and we're making a few revisions to the Store API. I think the <Save> AjaxEvent might be removed. This <Save> is causing confusion as it's not actually the main "save" event of the Store. Things should be clearer shortly. 


I apologize for the confusion. 

Vladimir
Sep 09, 2008, 10:56 AM
Hi Timothy,

Can you clarify for me your example?

1. Do you use Store with GridPanel?
2. Do you want to pass with save request additional information (DocumentId)?
3. How you bind data to Store?

Sorry for the additinal questions, just I need to know more information about your task for write example which can satisfy you.

Vladimir
Sep 09, 2008, 11:37 AM
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>