Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / docs / source / AlbumsPanel.html
diff --git a/docs/source/AlbumsPanel.html b/docs/source/AlbumsPanel.html

new file mode 100644 (file)

index 0000000..ed65c59
--- /dev/null
+++ b/docs/source/AlbumsPanel.html
@@ -0,0 +1,100 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">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);
+</pre>    \r
+</body>\r
+</html>
+\ No newline at end of file