1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | Ext.onReady(function(){ |
---|
10 | |
---|
11 | Ext.QuickTips.init(); |
---|
12 | // Album toolbar |
---|
13 | var newIndex = 3; |
---|
14 | var tb = new Ext.Toolbar({ |
---|
15 | items:[{ |
---|
16 | text: 'New Album', |
---|
17 | iconCls: 'album-btn', |
---|
18 | handler: function(){ |
---|
19 | var node = root.appendChild(new Ext.tree.TreeNode({ |
---|
20 | text:'Album ' + (++newIndex), |
---|
21 | cls:'album-node', |
---|
22 | allowDrag:false |
---|
23 | })); |
---|
24 | tree.getSelectionModel().select(node); |
---|
25 | setTimeout(function(){ |
---|
26 | ge.editNode = node; |
---|
27 | ge.startEdit(node.ui.textNode); |
---|
28 | }, 10); |
---|
29 | } |
---|
30 | }] |
---|
31 | }); |
---|
32 | |
---|
33 | // set up the Album tree |
---|
34 | var tree = new Ext.tree.TreePanel({ |
---|
35 | // tree |
---|
36 | animate:true, |
---|
37 | enableDD:true, |
---|
38 | containerScroll: true, |
---|
39 | ddGroup: 'organizerDD', |
---|
40 | rootVisible:false, |
---|
41 | // layout |
---|
42 | region:'west', |
---|
43 | width:200, |
---|
44 | split:true, |
---|
45 | // panel |
---|
46 | title:'My Albums', |
---|
47 | autoScroll:true, |
---|
48 | tbar: tb, |
---|
49 | margins: '5 0 5 5' |
---|
50 | }); |
---|
51 | |
---|
52 | var root = new Ext.tree.TreeNode({ |
---|
53 | text: 'Albums', |
---|
54 | allowDrag:false, |
---|
55 | allowDrop:false |
---|
56 | }); |
---|
57 | tree.setRootNode(root); |
---|
58 | |
---|
59 | root.appendChild( |
---|
60 | new Ext.tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}), |
---|
61 | new Ext.tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}), |
---|
62 | new Ext.tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false}) |
---|
63 | ); |
---|
64 | |
---|
65 | // add an inline editor for the nodes |
---|
66 | var ge = new Ext.tree.TreeEditor(tree, { |
---|
67 | allowBlank:false, |
---|
68 | blankText:'A name is required', |
---|
69 | selectOnFocus:true |
---|
70 | }); |
---|
71 | |
---|
72 | // Set up images view |
---|
73 | |
---|
74 | var view = new Ext.DataView({ |
---|
75 | itemSelector: 'div.thumb-wrap', |
---|
76 | style:'overflow:auto', |
---|
77 | multiSelect: true, |
---|
78 | plugins: new Ext.DataView.DragSelector({dragSafe:true}), |
---|
79 | store: new Ext.data.JsonStore({ |
---|
80 | url: '../view/get-images.php', |
---|
81 | autoLoad: true, |
---|
82 | root: 'images', |
---|
83 | id:'name', |
---|
84 | fields:[ |
---|
85 | 'name', 'url', |
---|
86 | {name: 'shortName', mapping: 'name', convert: shortName} |
---|
87 | ] |
---|
88 | }), |
---|
89 | tpl: new Ext.XTemplate( |
---|
90 | '<tpl for=".">', |
---|
91 | '<div class="thumb-wrap" id="{name}">', |
---|
92 | '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>', |
---|
93 | '<span>{shortName}</span></div>', |
---|
94 | '</tpl>' |
---|
95 | ) |
---|
96 | }); |
---|
97 | |
---|
98 | var images = new Ext.Panel({ |
---|
99 | id:'images', |
---|
100 | title:'My Images', |
---|
101 | region:'center', |
---|
102 | margins: '5 5 5 0', |
---|
103 | layout:'fit', |
---|
104 | |
---|
105 | items: view |
---|
106 | }); |
---|
107 | |
---|
108 | var layout = new Ext.Panel({ |
---|
109 | layout: 'border', |
---|
110 | width:650, |
---|
111 | height:400, |
---|
112 | items: [tree, images] |
---|
113 | }); |
---|
114 | |
---|
115 | layout.render('layout'); |
---|
116 | |
---|
117 | var dragZone = new ImageDragZone(view, {containerScroll:true, |
---|
118 | ddGroup: 'organizerDD'}); |
---|
119 | }); |
---|
120 | |
---|
121 | |
---|
122 | |
---|
123 | /** |
---|
124 | * Create a DragZone instance for our JsonView |
---|
125 | */ |
---|
126 | ImageDragZone = function(view, config){ |
---|
127 | this.view = view; |
---|
128 | ImageDragZone.superclass.constructor.call(this, view.getEl(), config); |
---|
129 | }; |
---|
130 | Ext.extend(ImageDragZone, Ext.dd.DragZone, { |
---|
131 | // We don't want to register our image elements, so let's |
---|
132 | // override the default registry lookup to fetch the image |
---|
133 | // from the event instead |
---|
134 | getDragData : function(e){ |
---|
135 | var target = e.getTarget('.thumb-wrap'); |
---|
136 | if(target){ |
---|
137 | var view = this.view; |
---|
138 | if(!view.isSelected(target)){ |
---|
139 | view.onClick(e); |
---|
140 | } |
---|
141 | var selNodes = view.getSelectedNodes(); |
---|
142 | var dragData = { |
---|
143 | nodes: selNodes |
---|
144 | }; |
---|
145 | if(selNodes.length == 1){ |
---|
146 | dragData.ddel = target; |
---|
147 | dragData.single = true; |
---|
148 | }else{ |
---|
149 | var div = document.createElement('div'); // create the multi element drag "ghost" |
---|
150 | div.className = 'multi-proxy'; |
---|
151 | for(var i = 0, len = selNodes.length; i < len; i++){ |
---|
152 | div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only |
---|
153 | if((i+1) % 3 == 0){ |
---|
154 | div.appendChild(document.createElement('br')); |
---|
155 | } |
---|
156 | } |
---|
157 | var count = document.createElement('div'); // selected image count |
---|
158 | count.innerHTML = i + ' images selected'; |
---|
159 | div.appendChild(count); |
---|
160 | |
---|
161 | dragData.ddel = div; |
---|
162 | dragData.multi = true; |
---|
163 | } |
---|
164 | return dragData; |
---|
165 | } |
---|
166 | return false; |
---|
167 | }, |
---|
168 | |
---|
169 | // this method is called by the TreeDropZone after a node drop |
---|
170 | // to get the new tree node (there are also other way, but this is easiest) |
---|
171 | getTreeNode : function(){ |
---|
172 | var treeNodes = []; |
---|
173 | var nodeData = this.view.getRecords(this.dragData.nodes); |
---|
174 | for(var i = 0, len = nodeData.length; i < len; i++){ |
---|
175 | var data = nodeData[i].data; |
---|
176 | treeNodes.push(new Ext.tree.TreeNode({ |
---|
177 | text: data.name, |
---|
178 | icon: '../view/'+data.url, |
---|
179 | data: data, |
---|
180 | leaf:true, |
---|
181 | cls: 'image-node' |
---|
182 | })); |
---|
183 | } |
---|
184 | return treeNodes; |
---|
185 | }, |
---|
186 | |
---|
187 | // the default action is to "highlight" after a bad drop |
---|
188 | // but since an image can't be highlighted, let's frame it |
---|
189 | afterRepair:function(){ |
---|
190 | for(var i = 0, len = this.dragData.nodes.length; i < len; i++){ |
---|
191 | Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1); |
---|
192 | } |
---|
193 | this.dragging = false; |
---|
194 | }, |
---|
195 | |
---|
196 | // override the default repairXY with one offset for the margins and padding |
---|
197 | getRepairXY : function(e){ |
---|
198 | if(!this.dragData.multi){ |
---|
199 | var xy = Ext.Element.fly(this.dragData.ddel).getXY(); |
---|
200 | xy[0]+=3;xy[1]+=3; |
---|
201 | return xy; |
---|
202 | } |
---|
203 | return false; |
---|
204 | } |
---|
205 | }); |
---|
206 | |
---|
207 | // Utility functions |
---|
208 | |
---|
209 | function shortName(name){ |
---|
210 | if(name.length > 15){ |
---|
211 | return name.substr(0, 12) + '...'; |
---|
212 | } |
---|
213 | return name; |
---|
214 | }; |
---|