Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / examples / image-organizer / imgorg / ImagePanel.js
1 /*!
2  * Ext JS Library 3.1.1
3  * Copyright(c) 2006-2010 Ext JS, LLC
4  * licensing@extjs.com
5  * http://www.extjs.com/license
6  */
7 Imgorg.ImagePanel = Ext.extend(Ext.Panel,{
8     closable: true,
9     border: false,
10     tagTpl: new Ext.XTemplate(
11         '<h3 class="image-prop-header">Tags</h3>',
12         '<tpl for=".">',
13             '<div class="image-prop">{text}</div>',
14         '</tpl>'
15     ),
16     albumTpl: new Ext.XTemplate(
17         '<h3 class="image-prop-header">Album</h3>',
18         '<tpl for=".">',
19             '<div class="image-prop">{text}</div>',
20         '</tpl>'
21     ),
22     infoTpl: new Ext.XTemplate(
23         '<h3 class="image-prop-header">File Info</h3>',
24         '<div class="image-prop">Filename: {FileName}</div>',
25         '<div class="image-prop">Size: {FileSize:fileSize}</div>',
26         '<div class="image-prop">Height: {[values["COMPUTED"].Height]}</div>',
27         '<div class="image-prop">Width: {[values["COMPUTED"].Width]}</div>'
28     ),
29     initComponent: function() {
30         Ext.apply(this,{
31             layout: 'border',
32             items: [{
33                 border: false,
34                 region: 'center',
35                 html: '<div style="text-align:center;"><img src="'+this.url+'"/></div>',
36                 autoScroll: true
37             },{
38                 border: false,
39                 region: 'east',
40                 itemId: 'image-properties',
41                 width: 250,
42                 title: 'Properties',
43                 collapsible: true,
44                 style: 'border-left: 1px solid #99BBE8'
45             }]
46         });
47         Imgorg.ImagePanel.superclass.initComponent.call(this);
48     },
49     
50     afterRender: function() {
51         Imgorg.ImagePanel.superclass.afterRender.call(this);
52         Imgorg.ss.Images.getInfo({image: this.imageData.id}, this.onGetInfo, this);
53         Imgorg.ss.Albums.getAlbums({image: this.imageData.id}, this.onGetAlbums,this);
54         Imgorg.ss.Tags.getTags({image: this.imageData.id}, this.onGetTags, this);
55     },
56     
57     onGetInfo: function(data, resp) {
58         var prop = this.getComponent('image-properties');
59         this.infoTpl.append(prop.body, data)
60     },
61     
62     onGetTags: function(data, resp) {
63         var prop = this.getComponent('image-properties');
64         this.tagTpl.append(prop.body, data);
65     },
66     
67     onGetAlbums: function(data, resp) {
68         var prop = this.getComponent('image-properties');
69         this.albumTpl.append(prop.body, data);
70     }
71 });
72 Ext.reg('img-panel',Imgorg.ImagePanel);