Extjs DataView With Pagination

January 11th, 2011 by aditia rahman / 2 Comments  

     

It’s quite a long time since I write post about ExtJS, just want to add ExtJS to my post collection, this time I want to show it that the dataview component can be applied with paging toolbar, maybe you want to create a gallery that have a lot of images, and basically I using my older source about Image Gallery in ExtJS, actually not much change in the code and I only post some part of code from this example, but of course you can download the full source code or view the online demo.

View Demo | Download Source

First I modified the store component

var store = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        root:'images', totalProperty: 'result'
        }, [ 'name', 'thumb_url' ]
    ),
    proxy: new Ext.data.HttpProxy({
        url: 'get-images.php', method: 'POST'
    })
});

The store varible I changed to Ext.data.Store component and the reader must be in JsonReader otherwise it will not work for me, and now create the paging toolbar component

var pagingbar = new Ext.PagingToolbar({
    style: 'border:1px solid #99BBE8;',
    store: store,
    pageSize: 5,
    displayInfo: true
});

The Ext.PagingToolbar is a subclass of the Ext.Toolbar so it can be included in panel component as an items, here what it look like

var panelMain = new Ext.Panel({
    id: 'images-view',
    frame: true,
    width: 640,
    height: 200,
    autoHeight: true,
    layout: 'auto',
    title: 'ExtJS DataView With Pagination',
    items: [pagingbar,datav]
});

And lastly is the PHP code that I modified

<?php
$dir_thumbs = "img/thumbs/";

$images = array();
$d = dir($dir_thumbs);

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 5;

while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir_thumbs.$name);
    $lastmod = filemtime($dir_thumbs.$name)*1000;
    $images[] = array(
        'name' => $name,
        'thumb_url' => $dir_thumbs.$name
    );
}

$result = count($images);

if ($start == 0) {
    $finish = $limit;
} else {
    $finish = $start + $limit;
}

$fetch_images = array();
for ($i = $start; $i < $finish; $i++) {
    $fetch_images[] = $images[$i];
}

$d->close();
$o = array('result' => $result, 'images' => $fetch_images);
echo json_encode($o);

The data I fetched by reading all files in the a location in the directory, with adding the pagination feature, you can modified it whether you want to get data from database, and using some sql limit function, it’s up to you.

View Demo | Download Source
        submit to reddit Delicious

2 Comments Leave a Comment Subscribe RSS

  • Neil says:

    Hi Aditia,
    thank you for sharing the code – I am learning ext js and your code was a great help. It worked with extjs 3, as intended. But it looks like changes made in extjs 4 broke something that results in error in ext-all-debug.js (line 25524)
    obj is null
    return obj[expr];
    after I made the following changes in the code to make in attempt to make it work with extjs 4.0.7:
    //—————————–
    Ext.onReady(function(){
    Ext.define(‘myImage’, {
    extend: ‘Ext.data.Model’,
    fields: [
    {name: 'name', type: 'string'},
    {name: 'thumb_url', type: 'string'}
    ]
    });

    var store = Ext.create(‘Ext.data.Store’, {
    model: ‘myImage’,
    autoLoad: true,
    proxy: {
    type: ‘ajax’,
    url: ‘get-images.php’,
    actionMethods: {
    read: ‘POST’,
    },
    reader: {
    type: ‘json’,
    root: ‘images’,
    totalProperty: ‘result’
    }
    }

    });
    //——————————-
    If you have a suggestion on how to migrate this code to 4.0 please let me know.Thank you very much.

Leave a Comment