[CLOSED] Prevent paging toolbar from calling doLoad using beforechange and returning false

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Prevent paging toolbar from calling doLoad using beforechange and returning false

    I'm trying to prevent the doLoad call from occurring in the paging toolbar under certain circumstances. So I tried

    MyPager.on('beforechange',function(){return false;});
    But that doesn't seem to work. If I run that in the JS console in chrome and then call
    MyPager.fireEvent('beforechange')
    , it returns true.. can someone tell me what I'm doing wrong?

    My goal is to clear out the store and "reset" the pager. Once I do that (which works ok), I notice that the page numbers don't reset in the pager.

    My logic goes something like this

    
    MyStore.removeAll();
    MyPager.bindStore(MyStore);
    //now I want to reset the page count on the pager to 0
    Is this a bug in the pager?
    Last edited by Baidaly; Nov 04, 2012 at 10:18 PM.
  2. #2
    I just came to the realization that I didn't need to do this.

    What I ended up doing was just removing the direct event on the button and adding a click listener which moved the pager to the first page, which in turn loads the data starting at the first page.

    Problem solved.
  3. #3
    Hi @jsoli,

    A good job! I guess you used a moveFirst method?
    http://docs.sencha.com/ext-js/3-4/#!...thod-moveFirst
  4. #4
    Precisely.

    I am curious, though. Why doesn't removing the data from the store and rebinding the pager not reset the page count as well?
  5. #5
    Quote Originally Posted by jlosi View Post
    I'm trying to prevent the doLoad call from occurring in the paging toolbar under certain circumstances. So I tried

    MyPager.on('beforechange',function(){return false;});
    But that doesn't seem to work. If I run that in the JS console in chrome and then call
    MyPager.fireEvent('beforechange')
    , it returns true.. can someone tell me what I'm doing wrong?
    I was unable to reproduce. Here is my test case.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                    new object[] { "test4" },
                    new object[] { "test5" },
                    new object[] { "test6" },
                    new object[] { "test7" },
                    new object[] { "test8" },
                    new object[] { "test9" }
                };
                store.DataBind();
            }
        }
    </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">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="3" />
                </BottomBar>
            </ext:GridPanel>
    
            <ext:Button runat="server" Text="Attach a beforechange listener">
                <Listeners>
                    <Click Handler="PagingToolbar1.on('beforechange', function () { return false; });" />
                </Listeners>
            </ext:Button>
    
            <ext:Button runat="server" Text="fireEvent">
                <Listeners>
                    <Click Handler="alert(PagingToolbar1.fireEvent('beforechange'));" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
  6. #6
    Quote Originally Posted by jlosi View Post
    I am curious, though. Why doesn't removing the data from the store and rebinding the pager not reset the page count as well?
    I was unable to reproduce. Please provide a sample.

    Here is my test case.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" },
                    new object[] { "test4" },
                    new object[] { "test5" },
                    new object[] { "test6" },
                    new object[] { "test7" },
                    new object[] { "test8" },
                    new object[] { "test9" }
                };
                store.DataBind();
            }
        }
    </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">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test" />
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar runat="server" PageSize="3" />
                </BottomBar>
            </ext:GridPanel>
    
            <ext:Button runat="server" Text="removeAll">
                <Listeners>
                    <Click Handler="GridPanel1.getStore().removeAll();" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
  7. #7
    see example (is a stripped down replica of what i have now):
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
         protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            Store store = this.GridPanel1.GetStore();
            object[] newVariable = new object[] 
                        { 
                            new object[] { "test1" },
                            new object[] { "test2" },
                            new object[] { "test3" },
                            new object[] { "test4" },
                            new object[] { "test5" },
                            new object[] { "test6" },
                            new object[] { "test7" },
                            new object[] { "test8" },
                            new object[] { "test9" }
                        };
            e.Total = newVariable.Count(); ;
            store.DataSource = newVariable.Skip(e.Start).Take(e.Limit);
            store.DataBind();
        }
    </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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <TopBar>
                <ext:PagingToolbar ID="PagingToolbar2" runat="server" PageSize="3" />
            </TopBar>
            <Store>
                <ext:Store ID="Store1" runat="server" RemotePaging="true" AutoLoad="False" RemoteSort="true"
                    WarningOnDirty="false" DirtyWarningText="false" ShowWarningOnFailure="false"
                    OnRefreshData="Store_RefreshData">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                    <Proxy>
                    <ext:PageProxy />
                    </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button ID="Button1" runat="server" Text="removeAll">
            <Listeners>
                <Click Handler="GridPanel1.getStore().removeAll();" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  8. #8
    This happens because PagingToolbar doesn't listen 'clear' event sended when calling method removeAll. You can check it here in method bindStore: http://docs.sencha.com/ext-js/3-4/so...-PagingToolbar.
    You can override this behavior check following code:

    <script runat="server">
         protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            Store store = this.GridPanel1.GetStore();
            object[] newVariable = new object[]
                        {
                            new object[] { "test1" },
                            new object[] { "test2" },
                            new object[] { "test3" },
                            new object[] { "test4" },
                            new object[] { "test5" },
                            new object[] { "test6" },
                            new object[] { "test7" },
                            new object[] { "test8" },
                            new object[] { "test9" }
                        };
            e.Total = newVariable.Count(); ;
            store.DataSource = newVariable.Skip(e.Start).Take(e.Limit);
            store.DataBind();
        }
    </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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
        
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="True" />
        <script type="text/javascript">
            Ext.override(Ext.PagingToolbar, {
                bindStore: function(store, initial) {
                    var doLoad;
                    if (!initial && this.store) {
                        if (store !== this.store && this.store.autoDestroy) {
                            this.store.destroy();
                        } else {
                            this.store.un('beforeload', this.beforeLoad, this);
                            this.store.un('load', this.onLoad, this);
                            this.store.un('exception', this.onLoadError, this);
                            this.store.un('clear', this.onClear, this);
                        }
                        if (!store) {
                            this.store = null;
                        }
                    }
                    if (store) {
                        store = Ext.StoreMgr.lookup(store);
                        store.on({
                            scope: this,
                            beforeload: this.beforeLoad,
                            load: this.onLoad,
                            exception: this.onLoadError,
                            clear: this.onClear
                        });
                        doLoad = true;
                    }
                    this.store = store;
                    if (doLoad) {
                        this.onLoad(store, null, { });
                    }
                },
    
                onClear: function(s, r) {
                    this.onLoad(s, r, s.lastOptions.params);
                },
    
                getPageData: function() {
                    var total = this.store.getCount() > 0 ? this.store.getTotalCount() : 0;
                    return {
                        total: total,
                        activePage: Math.ceil((this.cursor + this.pageSize) / this.pageSize),
                        pages: total < this.pageSize ? 1 : Math.ceil(total / this.pageSize)
                    };
                }
            });
        </script>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <TopBar>
                <ext:PagingToolbar ID="PagingToolbar2" runat="server" PageSize="3" />
            </TopBar>
            <Store>
                <ext:Store ID="Store1" runat="server" RemotePaging="true" AutoLoad="False" RemoteSort="true"
                    WarningOnDirty="false" DirtyWarningText="false" ShowWarningOnFailure="false"
                    OnRefreshData="Store_RefreshData">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                    <Proxy>
                    <ext:PageProxy />
                    </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button ID="Button1" runat="server" Text="removeAll">
            <Listeners>
                <Click Handler="GridPanel1.getStore().removeAll();" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  9. #9
    Ok. I messed around with that. It doesn't seem to negatively affect anything and offers expected behavior that appears to be missing. Can that be merged into the code base?
  10. #10
    Hi,

    First of all, thank you for the sample to reproduce.

    Well, we would prefer to leave the things as they are. Here is a related discussion on Sencha:
    http://www.sencha.com/forum/showthread.php?82196

    I would agree with @Evan to do not consider it a bug.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: Jul 01, 2013, 6:24 AM
  2. Replies: 2
    Last Post: Dec 13, 2012, 4:43 AM
  3. Replies: 11
    Last Post: Jun 13, 2012, 4:53 PM
  4. [CLOSED] How to prevent focus loss after calling store.reload()
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jun 20, 2011, 9:21 PM
  5. [CLOSED] grid.getRowsValues(false) is returning all rows
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 26, 2010, 12:20 PM

Tags for this Thread

Posting Permissions