paginationgridtoolbarextjs4.1current-page

How to get current page from paging toolbar


I have a paging toolbar implemented in my grid using extjs 4.1 I get 20 sets of record of first page. "but" when I click next, it does not show the next page. I figure the problem is here

proxy: {
            type: 'ajax',
            scope: this,
            url: 'Controller/getData',
            extraParams: {
                PageNumber: this.currentPage, // this doesn't change on clicking next
                PageSize: 20

            },
            reader: {
                type: 'json',
                root: 'myTable',
                totalProperty: 'count'
            }

as you can see, the PageNumber I am passing to my controller is static.. If I change that to whatever number I get that page... so how do I get the current page so that I can pass it to my controller.. below is my toolbar

bbar: Ext.create('Ext.PagingToolbar', {
            scope: this,
            store: myStore,
            displayInfo: true,
            displayMsg: 'Displaying Records {0} - {1} of {2}',
            emptyMsg: "No Records to display"
        })

Solution

  • I'm not sure if I can help you, have you check your backend processing code? I mean, as far as I know, the way you declare store and paging toolbar is right so maybe the problem exist at server side.

    for a reference, this is my server side page (remote/data/user/mahasiswa/read.php) to handle store with paging support:

    $sql = "SELECT * FROM user";
    $rs = mysql_query($sql);
    $totalCount = mysql_num_rows($rs);
    $sql = $sql." LIMIT ".$start.",".$limit;
    $rs = mysql_query($sql);
    while($obj = mysql_fetch_object($rs)){
        $arr[] = $obj;
    }
    echo '{success:true, totalCount:'.$totalCount.', data:'.json_encode($arr).'}';
    

    then, this is my store:

    Ext.define('PMK.store.user.Mahasiswa', {
    extend: 'Ext.data.Store',
    model: 'PMK.model.user.Mahasiswa',
    pageSize: 30,
    
    proxy: {
        type: 'ajax',
        url: 'remote/data/user/mahasiswa/read.php',
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success',
            totalProperty: 'totalCount'
        }
    })
    

    finally this is my view:

    Ext.define('PMK.view.user.mahasiswa.List' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.mhslist',
    
    title:'Manage Mahasiswa',
    layout:'fit',
    
    initComponent: function() {
        this.items = [
            {
                xtype:'grid',
                store:'user.Mahasiswa',
                columns: [
                    {xtype: 'rownumberer', width: 50, sortable: false},
                    {header: 'Angkatan', dataIndex: 'ANGKATAN', sortable:true, width:60},
                    {header: 'NIM', dataIndex: 'NIM', sortable:true, width:100},
                    {header: 'Nama', dataIndex: 'NAMA', sortable:true, width:225},
                    {header: 'Program Studi', dataIndex: 'PRODI', sortable:true, width:225},
                    {header: 'Kelas', dataIndex: 'KELAS', sortable:true, width:50},
                    {header: 'Dosen PA', dataIndex: 'DOSEN_PA', sortable:true, width:125},
                    {header: 'Jalur', dataIndex: 'JALUR', sortable:true, width:50},
                    {header: 'Asal Sekolah', dataIndex: 'ASAL_SEKOLAH', sortable:true, width:175},
                    {header: 'Tempat Lahir', dataIndex: 'TL', sortable:true, width:100},
                    {header: 'Tanggal Lahir', dataIndex: 'TGL', sortable:true, width:75},
                    {header: 'JK', dataIndex: 'JK', sortable:true, width:25},
                    {header: 'Alamat', dataIndex: 'ALAMAT', sortable:true, width:225},
                    {header: 'Email', dataIndex: 'EMAIL', sortable:true, width:130},
                    {header: 'Telp', dataIndex: 'TELP', sortable:true, width:100},
                    {header: 'Agama', dataIndex: 'AGAMA', sortable:true, width:50},
                    {header: 'Input Date', dataIndex: 'INPUT_DATE', sortable:true, width:125},
                    {header: 'Input By', dataIndex: 'INPUT_BY', sortable:true, width:125},
                    {header: 'Edit Date', dataIndex: 'EDIT_DATE', sortable:true, width:125},
                    {header: 'Edit By', dataIndex: 'EDIT_BY', sortable:true, width:125}
                ]
            }
        ];
    
        this.bbar = Ext.create('Ext.PagingToolbar', {
            store: 'user.Mahasiswa',
            displayInfo: true,
            displayMsg: 'Displaying mahasiswa {0} - {1} of {2}',
            emptyMsg: "No mahasiswa to display"
        });
    
        this.callParent(arguments);
    }
    });