Paging not working, Extjs grid

0
votes

I made an extjs grid with a bottom toolbar to create a paging behavior, but it's not working and I don't know where is the problem, I've already done it with local data, but when i used a database it didn't work, it shows all the data at once.
Here's the code :

Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);

Ext.onReady(function() {
var categoriesStore = Ext.create('Ext.data.JsonStore', {
    autoLoad: true,
    pageSize : 10,      
    proxy: {
           type: 'ajax',
           url: 'GridDataBase/categories.php',
           reader: {
               type: 'json',
               totalProperty: 'total',
               root: 'categories',
               idProperty: 'name'
           }            
    },
    fields : ['id','name']
});

var panelOfData = Ext.create('Ext.grid.GridPanel',{
    store : categoriesStore,
    columns : [ {
        id : 'id',
        header : "Id",
        width : 20,
        sortable : true,
        dataIndex : 'id'
    }, {
        id : 'name',
        header : "Category Name",
        width : 75,
        sortable : true,
        dataIndex : 'name'
    } ],
    //stripeRows : true,

        //paging bar on the bottom
    bbar: Ext.create('Ext.PagingToolbar', {
        store: categoriesStore,
        displayInfo: true,
        displayMsg: '{0} - {1} of {2}',
        emptyMsg: "No categories to display"
    }),
    autoExpandColumn : 'name',
    height : 350,
    width : 600,
    renderTo : 'grid-ex',
    title : 'Categories'
});

categoriesStore.loadPage(1);
console.log(categoriesStore.count()); // the log here shows 0
});


Here's the PHP file : 

function GetCategories() {
    $query = "SELECT id, name FROM categorie";  
    $categories = array("categories" => array());
    @mysql_connect("localhost","superuser","SS4") or die();
    mysql_select_db("dbz"); !mysql_error () or die();
    $result = mysql_query($query);

    $num = mysql_num_rows($result);
    $i = 0;

    while ($row = mysql_fetch_assoc($result)) {
        $categories["categories"][$i] = $row;
        $i++;
    }

    return json_encode($categories);
}
echo GetCategories();
2
javascriptextjspaging
Have you implemented paging in categories.php? What paging does is passing paging related parameters to your php script, but implementation on server side is in your hands. – Krzysztof
The page only provides a json output, the data is from mysql database. – Kukulkan Io

2 Answers

0
votes

Extjs code sends some additional params for implementing the paging on server start, limit and these params have to be used in your query to send back records upto the pagesize limit of store. Server response should also send back a property with total number of records (to be assigned to totalProperty of store) which will be used to calculate number of pages.

    store.load({
        params:{
            start:0,
            limit: itemsPerPage
        }
    });

Hope it helps!!

0
votes

You havent implemented paging on server side. Try this:

function GetCategories($start, $limit) {
    $query = "SELECT id, name FROM categorie LIMIT $start, $limit";  
    $categories = array("categories" => array());
    @mysql_connect("localhost","superuser","SS4") or die();
    mysql_select_db("dbz"); !mysql_error () or die();
    $result = mysql_query($query);

    $num = mysql_num_rows($result);
    $i = 0;

    while ($row = mysql_fetch_assoc($result)) {
        $categories["categories"][$i] = $row;
        $i++;
    }

    return json_encode($categories);
}
$start = isset($_GET['start']) ? $_GET['start'] : 0;
$limit = isset($_GET['limit']) ? $_GET['limit'] : 0;

echo GetCategories($start, $limit);