Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / ImageThumbPanel.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
9     minWidth: 80,
10     title: 'All Photos',
11     
12     initComponent: function() {
13         this.tfId = 'tag-filter-'+Ext.id();
14         
15         var sliderValue = 0;
16         var p = Ext.state.Manager.getProvider();
17         if (p) {
18             sliderValue = Ext.num(p.get('sliderValue'), 0);
19         }
20         
21         Ext.apply(this,{
22             layout:'fit',
23             cls: 'images-view',
24             items:Ext.apply({
25                 xtype: 'img-dv',
26                 itemId: 'imgorg-dv'
27             },this.dvConfig||{}),
28             bbar:['Tags:',{
29                 xtype: 'img-tagmulticombo',
30                 id: this.tfId,
31                 listeners: {
32                     select: function(combo, record, idx) {
33                         var vals = combo.getValue();
34                         this.tagFilter(vals);
35                         return true;
36                     },
37                     clearall: function(combo) {
38                         this.clearFilter();
39                     },
40                     scope: this
41                 }
42             },'->',{
43                 xtype: 'slider',
44                 itemId: 'size-slider',
45                 width: 200,
46                 style: 'margin-right:20px;',
47                 value: sliderValue,
48                 plugins: new Ext.ux.SliderTip({
49                     getText: function(slider){
50                         return String.format('<b>{0}%</b>', 100+slider.getValue()*3);
51                     }
52                 }),
53                 listeners: {
54                     change: this.onChange,
55                     scope: this
56                 }
57             }]
58         });
59         Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
60         this.on('activate', this.onActivate, this);
61     },
62     
63     afterRender: function() {
64         Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
65         this.view = this.getComponent('imgorg-dv');
66         (function() {
67             this.dragZone = new ImageDragZone(this.view, {
68                 containerScroll:true,
69                 ddGroup: 'organizerDD'
70             });
71         }).defer(100, this);
72     },
73     
74     onActivate: function() {
75         this.reload();
76         var p = Ext.state.Manager.getProvider();
77         if (p) {
78             sliderValue = Ext.num(p.get('sliderValue'), 0);
79             var slider = this.getBottomToolbar().getComponent('size-slider');
80             slider.setValue(sliderValue);
81             this.onChange(slider);
82         }
83     },
84     
85     onChange: function(slider, e) {
86         var p = Ext.state.Manager.getProvider();
87         if (p) {
88             p.set('sliderValue', slider.getValue());
89         }
90         Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
91     },
92     
93     tagFilter: function(vals) {
94         if (this.view.store.lastOptions.params) {
95             var album = this.view.store.lastOptions.params.album;
96         }
97         
98         this.view.store.load({
99             params: {
100                 tags: vals,
101                 album: album
102             }
103         });
104     },
105     
106     clearFilter: function() {
107         var album = this.view.store.lastOptions.params.album;
108         this.view.store.load({
109             params: {
110                 album: album
111             }
112         });
113         Ext.getCmp(this.tfId).reset();
114     },
115     
116     albumFilter: function(album) {
117         this.getComponent('imgorg-dv').store.load({
118             params: {
119                 album: album.id
120             }
121         });
122     },
123     
124     reload: function() {
125         this.view.store.reload();
126     }
127 });
128 Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
129
130
131 ImageDragZone = function(view, config){
132     this.view = view;
133     ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
134 };
135 Ext.extend(ImageDragZone, Ext.dd.DragZone, {
136     // We don't want to register our image elements, so let's 
137     // override the default registry lookup to fetch the image 
138     // from the event instead
139     getDragData : function(e){
140         var target = e.getTarget('.thumb-wrap');
141         if(target){
142             var view = this.view;
143             if(!view.isSelected(target)){
144                 view.onClick(e);
145             }
146             var selNodes = view.getSelectedNodes();
147             var dragData = {
148                 nodes: selNodes
149             };
150             if(selNodes.length == 1){
151                 dragData.ddel = target;
152                 dragData.single = true;
153             }else{
154                 var div = document.createElement('div'); // create the multi element drag "ghost"
155                 div.className = 'multi-proxy';
156                 for(var i = 0, len = selNodes.length; i < len; i++){
157                     div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
158                     if((i+1) % 3 == 0){
159                         div.appendChild(document.createElement('br'));
160                     }
161                 }
162                 var count = document.createElement('div'); // selected image count
163                 count.innerHTML = i + ' images selected';
164                 div.appendChild(count);
165                 
166                 dragData.ddel = div;
167                 dragData.multi = true;
168             }
169             return dragData;
170         }
171         return false;
172     },
173
174     // this method is called by the TreeDropZone after a node drop
175     // to get the new tree node (there are also other way, but this is easiest)
176     getTreeNode : function(){
177         var treeNodes = [];
178         var nodeData = this.view.getRecords(this.dragData.nodes);
179         for(var i = 0, len = nodeData.length; i < len; i++){
180             var data = nodeData[i].data;
181             treeNodes.push(new Ext.tree.TreeNode({
182                 text: data.name,
183                 icon: '../view/'+data.url,
184                 data: data,
185                 leaf:true,
186                 cls: 'image-node'
187             }));
188         }
189         return treeNodes;
190     },
191     
192     // the default action is to "highlight" after a bad drop
193     // but since an image can't be highlighted, let's frame it 
194     afterRepair:function(){
195         for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
196             Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
197         }
198         this.dragging = false;    
199     },
200     
201     // override the default repairXY with one offset for the margins and padding
202     getRepairXY : function(e){
203         if(!this.dragData.multi){
204             var xy = Ext.Element.fly(this.dragData.ddel).getXY();
205             xy[0]+=3;xy[1]+=3;
206             return xy;
207         }
208         return false;
209     }
210 });</pre>    \r
211 </body>\r
212 </html>