GridPanel Store and AjaxEvents

  1. #1

    GridPanel Store and AjaxEvents

    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
  2. #2

    RE: GridPanel Store and AjaxEvents

    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

  3. #3

    RE: GridPanel Store and AjaxEvents

    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.*


    Geoffrey McGill
    Founder
  4. #4

    RE: GridPanel Store and AjaxEvents

    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.

  5. #5

    RE: GridPanel Store and AjaxEvents

    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>

Similar Threads

  1. Replies: 3
    Last Post: May 26, 2011, 5:18 AM
  2. Replies: 0
    Last Post: Feb 28, 2011, 5:51 PM
  3. Replies: 1
    Last Post: Nov 01, 2010, 9:00 PM
  4. Replies: 1
    Last Post: Jan 15, 2010, 8:56 AM
  5. [CLOSED] Error handling in GridPanel/Store AjaxEvents
    By jchau in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 09, 2009, 5:49 PM

Posting Permissions