0

My paging bar displays and says Displaying 1 - 5 of 10. But all of the 10 records are being displayed. I can't seem to figure it out.

Here is my List.js file

Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',

require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
    type: 'vbox',
    align: 'stretch'
},

reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
    { 
        text: 'Name', 
        dataIndex: 'name',
        flex: 1 
    },

    { 
        text: 'Address', 
        dataIndex: 'address', 
        flex: 1 
    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1
    },
    { 
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    },
    { 
        text: 'Faculty',
        dataIndex:'faculty',
        flex: 1
    }
],

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
                xtype: 'button',
                text: 'Add',
                iconCls: 'fa fa-plus',
                listeners: {
                click: 'onAdd'
            }
            },
            {
                xtype: 'button',
                text: 'Edit',
                iconCls: 'fa fa-edit',
                id: 'editButton',
                bind: {
                    disabled: '{ !mainList.selection }'
                },
                listeners: {
                   click: 'onEdit'
                }
            },
            {
                xtype: 'button',
                text: 'Delete',
                iconCls: 'fa fa-trash-o',
                bind: {
                    disabled: '{ !mainlist.selection }'
                },
                listeners: {
                    click: 'onDelete'
                }
            }]
        },
        {
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            displayInfo: true,
            store: 'StudentStore'
        }
    ],
// toolbar for our store filter field
tbar: [{
    xtype: 'textfield',
    fieldLabel: 'Search Student',
    emptyText: '...type to filter',
    width: 300,
    listeners: {
        change: 'onSearch'
    }
}]
});

And here is my StudentStore.js file

Ext.define('MyApp.store.StudentStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Student',
sorters: ['name'],
autoLoad: true,
pageSize: 5,
autoSync: false,
proxy: {
    method: 'GET',
    type: 'ajax',
    url: 'http://localhost:8080/extServlet/StudentController?action=listStudent',
    reader: {
        type: 'json',
        rootProperty: 'StudentStore',
        totalProperty: 'total'
    }
}
});

So, any suggestions?

user3127109
  • 3,421
  • 8
  • 24
  • 33
  • Try to add ' pageSize: 5; ' config inside proxy, as well as outside proxy. In my code it works. – Puneet Chawla Jul 31 '15 at 10:02
  • I tried pageSize: 5 inside proxy but it is not working but what do u mean by config? Can you show it abit clearly – user3127109 Jul 31 '15 at 10:06
  • In ExtJS, all these are the configs like pageSize, autoLoad, sorters and all others. In my code, when i write pageSize :5 inside & outside proxy, it works proper. Try it otherwise i give you code. – Puneet Chawla Jul 31 '15 at 10:08
  • ok send me your snippet then – user3127109 Jul 31 '15 at 10:09
  • The code of your servlet? Maybe your error it's related to the `totalProperty` – qmateub Jul 31 '15 at 10:52
  • @user3127109 - There is some server side code is written in my application (Big progect) to handle this situtation. So i will give you short way as soon as possible. It can take some time but i will give you solution surely. if it's compulsory to write server side code to handle this i will write and share with you. – Puneet Chawla Jul 31 '15 at 11:02
  • @user3127109 - I have solved this issue and posted an answer. Just check it and let me know the result. – Puneet Chawla Aug 01 '15 at 07:13

2 Answers2

0

You are using two different Stores in your Grid Panel: 1 for the Grid, and 1 for the Paging Toolbar.

In your configuration for the grid/pagingtoolbar you are setting "store: 'StudentStore'", which creates two StudentStores - but two different ones. (You can try to debug into your app and compare the id of the two stores).

The Store of the grid and the pagingbar need to be the identical.

How can you solve the Problem?

1) You can either define the store in the initComponent method of your grid and assign it to the grid and to the toolbar

2) (preferred): you can define the store in the ViewModel and bind the store in the grid and the toolbar:

ViewModel:

...
stores: {
    studentStore: {
        type: 'studentstore'
    }
}
...

Store:

Ext.define('MyApp.store.StudentStore', {
    extend: 'Ext.data.Store',
    alias: 'store.studentstore',
    ....

Grid:

...,
collapsible: true,
bind: {
    store: '{studentStore}'
},
collapsible: true,
...,

Regards,

ASN
  • 306
  • 2
  • 7
0

Finally solved this issue.

Total no. of records are 100. I have set a pageSize: 10 in store. Now first time when grid will be loaded, only 10 records will be displayed. Next time when you go to next page it will show you next 10 records.

There is need to write some server side code to solve this issue.

JS Code - 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Libraries/ext-all.js"></script>
    <script src="Libraries/ext-all-debug.js"></script>
    <link href="Libraries/ext-theme-crisp-all-debug.css" rel="stylesheet" />
    <script type="text/javascript">

        Ext.onReady(function () {
            var studentStore = Ext.create('Ext.data.Store',
                {
                    autoLoad: true,
                    pageSize: 10,
                    fields: ['ID', 'Invoice', 'Date', 'Vendor', 'ProductCode', 'ClientNumber', 'ClientName', 'Amount', 'Type'],
                    proxy:
                    {
                        type: 'ajax',
                        url: 'Handler2.ashx',
                        actionMethods: {
                            read: 'POST'
                        },
                        reader: {
                            type: 'json',
                            root: 'data',
                            totalProperty: 'total'
                        }
                    }
                });
            var window = new Ext.Window({
                id: 'grdWindow',
                width: 400,
                title: 'Grid Samples',
                items: [
                    {
                        xtype: 'panel',
                        layout: 'fit',
                        renderTo: Ext.getBody(),
                        items: [
                            {
                                xtype: 'grid',
                                id: 'grdSample',
                                height: 300,
                                store: studentStore,
                                    columns: [
                                    {
                                        header: 'Name',
                                        dataIndex: 'Name',
                                    },
                                    {
                                        header: 'Age',
                                        dataIndex: 'Age'
                                    },
                                    {
                                        header: 'Fee',
                                        dataIndex: 'Fee'
                                    }
                                    ],
                                    dockedItems:
                                        [   
                                            {
                                                xtype: 'pagingtoolbar',
                                                store:studentStore,
                                                dock:'bottom',
                                                displayInfo:true
                                            }
                                        ]
                            }
                        ]
                    }
                ]
            }).show();
        });
    </script>
</head>
<body>

</body>
</html>

Handler2.ashx.cs (server side code)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
namespace InsertionByExtJS
{
    /// <summary>
    /// Summary description for Handler2
    /// </summary>
    public class Handler2 : IHttpHandler
    {
        public int Id {get; set;}
        public String Invoice { get; set; }
        public String Date { get; set; }
        public String Vendor { get; set; }
        public String ProductCode { get; set; }
        public String ClientNumber { get; set; }
        public String ClientName { get; set; }
        public String Amount { get; set; }
        public String Type { get; set; }
        public String Name { get; set; }
        public String Profile { get; set; }
        public String Email { get; set; }

        List<Handler2> ListData;

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            ListData = new List<Handler2>();
            int i = 100;
            int j = 1;
            while (j <= i)
            {
                ListData.Add(new Handler2 { Name = "Puneet" + j, Profile = "Puneet" + j, Email = "Email" });
                j++;
            }

            string start1 = context.Request["start"];
            string limit1 = context.Request["limit"];

            int start = Convert.ToInt32(start1);
            int limit = Convert.ToInt32(limit1);


            List<Handler2> range = ListData.GetRange(start, limit);
            JavaScriptSerializer JSS = new JavaScriptSerializer();
            string result;

            result = string.Format("{{total:{1},'data':{0}}}", JSS.Serialize(range), ListData.Count);
            context.Response.Write(result);

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

I have tested almost everything and it's working properly in my system. Just check it and try to add this code in your application. I hope, it will work surely. If you still get any issue, let me know i will solve it out.

Puneet Chawla
  • 5,729
  • 4
  • 16
  • 33