[CLOSED] How to sync-up paging after inserting a Store record?

  1. #1

    [CLOSED] How to sync-up paging after inserting a Store record?

    Hi,

    Please advise how to keep the Store paging and page size in sync after inserting one or more new records on the client. The behavior I've been observing is that the first page visible display grows indefinitely with every new record added. That is despite the total number of pages on the pager increasing correctly. Once I page forward, this discrepancy disappears. Please let me know if more info is needed.

    // Invoked by a Button sitting on the GridPanel Paging Toolbar
    var addRecord = function () {
                var grid = this.up("gridpanel");
    
                grid.getStore().insert(0, new MyModel({
                    ID: getNextID(),
                    CurrentDate: new Date()
                }));
    };
    
    var getNextID=function(){
        // return some unique number 
    };
    Last edited by Daniil; Jul 22, 2013 at 7:13 AM. Reason: [CLOSED]
  2. #2
    Hi @Vadym,

    What kind of paging you are using - remote or local?

    Please also explain in greater details what exactly you expect after inserting a new record.
  3. #3
    I haven't set it explicitly so probably it's local paging. Please refer to the screenshot attached for the behavior details. Notice that the pager reports the number of pages correctly. However, the very first page keeps growing with every new record added. It should somehow re-synchronize itself to display the latest 10 records according to the PageSize property of the Store.

    Click image for larger version. 

Name:	Screenshot.jpg 
Views:	16 
Size:	89.3 KB 
ID:	6574

                                    <Store>
                                        <ext:Store runat="server" ID="Store1" PageSize="10">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server" IDProperty="ID" Name="MyModel">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" Type="Int" />
                                                        <ext:ModelField Name="CurrentDate" Type="Date" RenderMilliseconds="true" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
  4. #4
    I've tried the sample below and it seems to work:

    <%@ 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)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Add" Handler="#{GridPanel1}.store.insert(0, {company : 'New'})"></ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="10">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">                  
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server"  />
            </BottomBar>
        </ext:GridPanel>
    </body>
    </html>
  5. #5
    Quote Originally Posted by vadym.f View Post
    It should somehow re-synchronize itself to display the latest 10 records according to the PageSize property of the Store.
    The latest 10 records? I am not sure what exactly you mean under "latest".

    New records can be added to the begging, to the end or to the middle of the current page. Also if it should refresh the current page, the current filters and sorters will be reapplied and the records can go out of the current page which might be totally undesirable for a user. So, it is a tough case to solve in a generic manner.

    We can help you to tweak it for your case and needed behavior. However, we should better understand what you need.
  6. #6
    The current page grows indefinitely with every new record added on the client side. Any page should always be limited by the Page Size number, that's my understanding. This doesn't happen in my scenario. What's the right call to refresh the current page view on the client? Would you like me to post a code sample to reproduce?
    Last edited by vadym.f; Jul 19, 2013 at 11:38 AM.
  7. #7
    If after reloading a current page, newly added records will go to other pages, is that good? I think it is not something that a user could expect. Repeat myself, it is not simple thing to solve in a generic manner on the toolkit level.

    To reload a current page, please use:
    store.loadPage(store.currentPage);
  8. #8
    Quote Originally Posted by Daniil View Post
    If after reloading a current page, newly added records will go to other pages, is that good? I think it is not something that a user could expect. Repeat myself, it is not simple thing to solve in a generic manner on the toolkit level.

    To reload a current page, please use:
    store.loadPage(store.currentPage);
    I see what you mean. Do you personally think the current behavior is consistent and intuitive enough when the first page grows until user hits the pager controls? I've tried to call loadPage() and agree with you that it's not straight forward and may even look more perplexing to the user.
  9. #9
    Quote Originally Posted by vadym.f View Post
    I see what you mean. Do you personally think the current behavior is consistent and intuitive enough when the first page grows until user hits the pager controls? I've tried to call loadPage() and agree with you that it's not straight forward and may even look more perplexing to the user.
    Yes, loadPage can be confusing for users but you have to choose which solution is better for you.

    The store has some sorting parameters so new records should be moved to another pages. Even though you can create special sorter to keep new records on the top of first page it's not obvious how you would handle the situation when user adds new records on second or last page.
  10. #10
    Thanks for your insights guys! I'm probably better off sticking to the default behavior. Please close this thread down.

Similar Threads

  1. Sync store problem
    By Spamme in forum 2.x Help
    Replies: 1
    Last Post: Apr 18, 2013, 4:29 PM
  2. How to add mask for Store.sync()
    By devil in forum 2.x Help
    Replies: 2
    Last Post: Apr 01, 2013, 2:15 PM
  3. [CLOSED] REST store sync callback
    By thesvr in forum 2.x Premium Help
    Replies: 7
    Last Post: Nov 08, 2012, 12:57 PM
  4. Replies: 2
    Last Post: Jul 30, 2010, 7:18 PM
  5. Replies: 1
    Last Post: Aug 12, 2009, 11:39 AM

Tags for this Thread

Posting Permissions