ExtJS Thumb Viewer Using Dataview

February 11th, 2011 by aditia rahman / No Comments  

     

extjs thumb viewer dataview

In this post I want to create an example thumb viewer in ExtJS, if you have tried old software like gqview, you may familiar with this thumb viewer, well not really complicated actually, just love to use it when reading my favorite comic.

View Demo | Download Source

The ExtJS

The main component of this viewer is two dataview, one for thumbnails and another one for the original image. When a thumbnail clicked the relevant image show in the dataview that contain the original image, using some old html trick, jump to some html element based on id, like #divid.

Ext.onReady(function() {
    /* =======================================
     * start component for thumbnails panel */
    var storeThumbs = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'get-images.php', method: 'POST'
        }),
        root: 'images',
        fields: [
            'id', 'name', 'url',
            { name: 'size', type: 'float' },
            'thumb_url'
        ]
    });

    storeThumbs.load();

    var tplThumbs = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-box">',
                '<a href="#{id}">',
                    '<img src="{thumb_url}" title="{name}">',
                '</a>',
            '</div>',
        '</tpl>'
    );

    var dvThumbs = new Ext.DataView({
        autoScroll: true, store: storeThumbs, tpl: tplThumbs,
        autoHeight: false, height: 410, multiSelect: true,
        overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        border: false
    });

    // Panel for the thumbnails
    var panelThumbs = new Ext.Panel({
        region: 'west',
        split: false,
        width: 160,
        margins:'5 5 5 0',
        items: [dvThumbs]
    });
    /* end component for thumbnails panel
     * =================================== */

    /* =======================================
     * start component for large panel */
    var storeLarge = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'get-images.php', method: 'POST'
        }),
        root: 'images',
        fields: [
            'id', 'name', 'url',
            { name: 'size', type: 'float' },
            'thumb_url'
        ]
    });
    storeLarge.load();

    var tplLarge = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="large-box" id="{id}">',
                '<img src="{url}" title="{name}">',
            '</div>',
        '</tpl>'
    );

    var dvLarge = new Ext.DataView({
        autoScroll: true, store: storeLarge, tpl: tplLarge,
        autoHeight: false, height: 410, multiSelect: true,
        overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        border: false
    });

    // Panel for large images
    var panelLarge = new Ext.Panel({
        region: 'center',
        margins:'5 0 5 0',
        items:[dvLarge]
    });
    /* end component for large panel
     * =================================== */

    var win = new Ext.Window({
        title: 'ExtJS Images Viewer',
        closable: false,
        width: 620,
        height: 450,
        border: false,
        plain: true,
        layout: 'border',
        items: [panelThumbs, panelLarge]
    });

    win.show(this);
});
The PHP

This php code is very similar to the script from the ExtJS image gallery post, just add an id inside the array.

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

$images = array();
$d = dir($dir);
$loop = 0;
while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir.$name);
    $thumb = $name;
    $loop++;
    $images[] = array('id'=> 'img_'.$loop, 'name' => $name,
                    'size' => $size, 'url' => $dir.$name,
                    'thumb_url' => $dir_thumbs.$thumb);
}
$d->close();
$o = array('images'=>$images);
echo json_encode($o);
Dataview CSS
.thumb-box  {
    width: 100px;
    padding: 5px;
    text-align: center;
    margin: 13px auto;
    background: #ccd8e7;
    border: 1px solid #99BBE8;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}

.thumb-box:hover {
    background: #999999;
    border-color: #999999;
}

.large-box {
    width: 375px;
    margin: 15px auto;
}

View Demo | Download Source

extjs thumb viewer dataview

Credit Images: Flickr [ images 1 ], [ images 2 ], [ images 3 ], [ images 4 ], [ images 5 ]

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment