albumspanel.js

Ext JS是一个创建丰富互联网应用程序的跨浏览器的JavaScrip库。它包含：高效率

/*
 * Ext JS Library 3.0 Pre-alpha
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * [e-mail]
 * 
 * http://extjs.com/license
 */

Imgorg.AlbumsPanel = Ext.extend(Ext.Panel,{
    initComponent: function() {
        Ext.apply(this, {
            layout: 'column',
            defaults: {
                border: false
            },
            autoScroll: true,
            defaultType: 'img-album',
            items: [{
                columnWidth: 0.33
            },{
                columnWidth: 0.33
            },{
                columnWidth: 0.34
            }]
        });
        Imgorg.AlbumsPanel.superclass.initComponent.call(this);
        this.loadAlbums();
        this.on('activate', this.loadAlbums, this);
    },
    
    afterRender: function() {
        Imgorg.AlbumsPanel.superclass.afterRender.call(this);
        this.body.on('click', this.onClick, this, {delegate: 'div.album-wrap'});
    },
    
    loadAlbums: function() {
        Imgorg.ss.Albums.getAllInfo({}, this.setupAlbums, this);
    },
    
    setupAlbums: function(data, resp) {
        var cols = [[],[],[]];
        var idx = 0;
        for (var i = 0;i < data.length;i++) {
            var a = data[i];
            cols[idx].push(a);
            if (++idx >= 3) {
                idx = 0;
            }
        }
        for (var i = 0; i < 3; i++) {
            this.items.get(i).generateAlbums(cols[i]);
        }
    },
    
    onClick: function(e, n) {
        var album = n.attributes.album_id.value;
        var album_name = n.attributes.album_name.value;
        this.fireEvent('openalbum', this, album, album_name);
    }
});
Ext.reg('img-albumspanel', Imgorg.AlbumsPanel);

Imgorg.Album = Ext.extend(Ext.Panel,{
    maxWidth: 150,
    maxHeight: 100,
    tpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="album-wrap" album_id="{id}" album_name="{text}">',
                '<div class="album-wrap-inner">',
                    '{filename:this.imageFormat}',
                    '<h3>Album: {text}</h3>',
                    '<div class="album-details">',
                        '<p>Date: {date}</p>',
                        '<p>Size: {size} images</p>',
                    '</div>',
                '</div>',
            '</div>',
        '</tpl>',{
            imageFormat: function(filename, data) {
                if (filename) {
                    return String.format('<img src="images/thumbs/{0}" height="{1}" width="{2}" />',filename, data.height, data.width);
                } else {
                    return '<p>No Images in Album</p>';
                }
            }
        }
    ),
    generateAlbums: function(albums) {
        for(var i = 0; i < albums.length;i++) {
            if (albums[i].exif) {
                albums[i].height = Math.min(this.maxHeight, albums[i].exif.COMPUTED.Height);
                albums[i].width = Math.min(this.maxWidth, albums[i].exif.COMPUTED.Width);
            }
        }
        this.tpl.overwrite(this.body, albums);
    }
});
Ext.reg('img-album', Imgorg.Album);