[CLOSED] Validation on click of next/previous buttons of paging tool bar

  1. #1

    [CLOSED] Validation on click of next/previous buttons of paging tool bar

    Hi,

    We have implemented remote paging for our store. I want validate my store whether it is dirty on click of next/previous buttons of paging tool bar and if dirty show a confirmation message. If the user selects to continue then load the next page else do not load the next page. I am calling below javascript on beforeload event of store.

    var ValidateDataBeforeNavigate = function (store) {
        var modifiedRecordsLength = store.getModifiedRecords().length;
    
        if (modifiedRecordsLength > 0) {
            Ext.Msg.confirm('Alert', 'You have uncommited changes. Your changes will be lost if you navigate to other page without saving the changes.Do you wish to continue?', function (btn) {
                if (btn == "yes") {
                    Common.ShowMask('Loading inventory plan details...');
                    return true;
                }
                else
                { return false; }
            });
            return false;
        }
        else
        { Common.ShowMask('Loading inventory plan details...'); return true; }
    };
    please help.

    Thanks
    Anulekha
    Last edited by Daniil; Jan 02, 2012 at 8:22 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Returning false/true from a conformation callback doesn't make any sense.

    You should call the Store's load method with respective options:
    http://docs.sencha.com/ext-js/3-4/#!...re-method-load

    Respective options can be saved in the beforeLoad listeners, it's the second argument:
    http://docs.sencha.com/ext-js/3-4/#!...ent-beforeload

    Please note when you call the load method, the BeforeLoad event will be fired again and you should avoid your JavaScript code to be executed. You can set up and then read your own Store's JavaScript property.

    Another way is dealing with the Next and Previous buttons directly. Please see how to access them:
    http://forums.ext.net/showthread.php...ll=1#post57689

    You can set up a Click listener for these buttons:
    pagingToolbar.next.on('click', function () { alert('Next'); });
    You might need to use the Next/Previous buttons fireEvent method if a user confirms an action.
    http://docs.sencha.com/ext-js/3-4/#!...thod-fireEvent
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Returning false/true from a conformation callback doesn't make any sense.

    You should call the Store's load method with respective options:
    http://docs.sencha.com/ext-js/3-4/#!...re-method-load

    Respective options can be saved in the beforeLoad listeners, it's the second argument:
    http://docs.sencha.com/ext-js/3-4/#!...ent-beforeload

    Please note when you call the load method, the BeforeLoad event will be fired again and you should avoid your JavaScript code to be executed. You can set up and then read your own Store's JavaScript property.

    Another way is dealing with the Next and Previous buttons directly. Please see how to access them:
    http://forums.ext.net/showthread.php...ll=1#post57689

    You can set up a Click listener for these buttons:
    pagingToolbar.next.on('click', function () { alert('Next'); });
    You might need to use the Next/Previous buttons fireEvent method if a user confirms an action.
    http://docs.sencha.com/ext-js/3-4/#!...thod-fireEvent
    Hi Daniil,

    I am unable to proceed with this functionality. Though the confirmation box is displayed, the grid gets refreshed with next page data. Can you please help me by providing a example

    Thanks
    Anulekha
  4. #4
    I forgot about such built-in functionality.

    Please try to:

    1. Change a field's value;
    2. Change a page;
    3. You will be asked to confirm an operation.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        public List<object> MyData = new List<object> 
        { 
            new { test = "test1" },
            new { test = "test2" },
            new { test = "test3" },
            new { test = "test4" },
            new { test = "test5" },
            new { test = "test6" },
            new { test = "test7" },
            new { test = "test8" },
            new { test = "test9" }
        };
    
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            List<object> data = this.MyData;
            var limit = e.Limit;
            if ((e.Start + e.Limit) > data.Count)
            {
                limit = data.Count - e.Start;
            }
            List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
            e.Total = data.Count;
            (sender as Store).DataSource = rangeData;
        }
    </script>
    
    <!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>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server" OnRefreshData="Store_RefreshData">
                        <Proxy>
                            <ext:PageProxy />
                        </Proxy>
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                        <BaseParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                        </BaseParams>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar runat="server" PageSize="3" />
                </BottomBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Quote Originally Posted by Daniil View Post
    I forgot about such built-in functionality.

    Please try to:

    1. Change a field's value;
    2. Change a page;
    3. You will be asked to confirm an operation.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        public List<object> MyData = new List<object> 
        { 
            new { test = "test1" },
            new { test = "test2" },
            new { test = "test3" },
            new { test = "test4" },
            new { test = "test5" },
            new { test = "test6" },
            new { test = "test7" },
            new { test = "test8" },
            new { test = "test9" }
        };
    
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            List<object> data = this.MyData;
            var limit = e.Limit;
            if ((e.Start + e.Limit) > data.Count)
            {
                limit = data.Count - e.Start;
            }
            List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
            e.Total = data.Count;
            (sender as Store).DataSource = rangeData;
        }
    </script>
    
    <!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>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server" OnRefreshData="Store_RefreshData">
                        <Proxy>
                            <ext:PageProxy />
                        </Proxy>
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                        <BaseParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                        </BaseParams>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar runat="server" PageSize="3" />
                </BottomBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Hi Daniil,

    We are using MVC pattern and hence can not have code behind. Can you please explain how i can implement this functionality using before load event of store?

    Thanks
    ANulekha
  6. #6
    This functionality works on client side independently from code behind or MVC.

Similar Threads

  1. Replies: 4
    Last Post: Aug 07, 2012, 10:02 AM
  2. Replies: 11
    Last Post: Feb 08, 2012, 8:18 AM
  3. [CLOSED] [1.0] Previous/Next buttons on Details Window
    By MP in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2010, 11:46 AM
  4. Replies: 1
    Last Post: Jun 05, 2009, 1:43 AM
  5. Paging Tool Bar - NaN
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2009, 10:06 AM

Posting Permissions