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

[vadym.f]

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 
};

[Daniil]

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.

[vadym.f]

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.

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

[Baidaly]

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>

[Daniil]

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.

[vadym.f]

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?

[Daniil]

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);