3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
\r
9 Ext.QuickTips.init();
\r
12 var tb = new Ext.Toolbar({
\r
15 iconCls: 'album-btn',
\r
16 handler: function(){
\r
17 var node = root.appendChild(new Ext.tree.TreeNode({
\r
18 text:'Album ' + (++newIndex),
\r
22 tree.getSelectionModel().select(node);
\r
23 setTimeout(function(){
\r
25 ge.startEdit(node.ui.textNode);
\r
31 // set up the Album tree
\r
32 var tree = new Ext.tree.TreePanel({
\r
36 containerScroll: true,
\r
37 ddGroup: 'organizerDD',
\r
50 var root = new Ext.tree.TreeNode({
\r
55 tree.setRootNode(root);
\r
58 new Ext.tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
\r
59 new Ext.tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
\r
60 new Ext.tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
\r
63 // add an inline editor for the nodes
\r
64 var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
\r
66 blankText:'A name is required',
\r
70 // Set up images view
\r
72 var view = new Ext.DataView({
\r
73 itemSelector: 'div.thumb-wrap',
\r
74 style:'overflow:auto',
\r
76 plugins: new Ext.DataView.DragSelector({dragSafe:true}),
\r
77 store: new Ext.data.JsonStore({
\r
78 url: '../view/get-images.php',
\r
84 {name: 'shortName', mapping: 'name', convert: shortName}
\r
87 tpl: new Ext.XTemplate(
\r
89 '<div class="thumb-wrap" id="{name}">',
\r
90 '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>',
\r
91 '<span>{shortName}</span></div>',
\r
96 var images = new Ext.Panel({
\r
100 margins: '5 5 5 0',
\r
106 var layout = new Ext.Panel({
\r
110 items: [tree, images]
\r
113 layout.render('layout');
\r
115 var dragZone = new ImageDragZone(view, {containerScroll:true,
\r
116 ddGroup: 'organizerDD'});
\r
122 * Create a DragZone instance for our JsonView
\r
124 ImageDragZone = function(view, config){
\r
126 ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
\r
128 Ext.extend(ImageDragZone, Ext.dd.DragZone, {
\r
129 // We don't want to register our image elements, so let's
\r
130 // override the default registry lookup to fetch the image
\r
131 // from the event instead
\r
132 getDragData : function(e){
\r
133 var target = e.getTarget('.thumb-wrap');
\r
135 var view = this.view;
\r
136 if(!view.isSelected(target)){
\r
139 var selNodes = view.getSelectedNodes();
\r
143 if(selNodes.length == 1){
\r
144 dragData.ddel = target;
\r
145 dragData.single = true;
\r
147 var div = document.createElement('div'); // create the multi element drag "ghost"
\r
148 div.className = 'multi-proxy';
\r
149 for(var i = 0, len = selNodes.length; i < len; i++){
\r
150 div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
\r
151 if((i+1) % 3 == 0){
\r
152 div.appendChild(document.createElement('br'));
\r
155 var count = document.createElement('div'); // selected image count
\r
156 count.innerHTML = i + ' images selected';
\r
157 div.appendChild(count);
\r
159 dragData.ddel = div;
\r
160 dragData.multi = true;
\r
167 // this method is called by the TreeDropZone after a node drop
\r
168 // to get the new tree node (there are also other way, but this is easiest)
\r
169 getTreeNode : function(){
\r
170 var treeNodes = [];
\r
171 var nodeData = this.view.getRecords(this.dragData.nodes);
\r
172 for(var i = 0, len = nodeData.length; i < len; i++){
\r
173 var data = nodeData[i].data;
\r
174 treeNodes.push(new Ext.tree.TreeNode({
\r
176 icon: '../view/'+data.url,
\r
185 // the default action is to "highlight" after a bad drop
\r
186 // but since an image can't be highlighted, let's frame it
\r
187 afterRepair:function(){
\r
188 for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
\r
189 Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
\r
191 this.dragging = false;
\r
194 // override the default repairXY with one offset for the margins and padding
\r
195 getRepairXY : function(e){
\r
196 if(!this.dragData.multi){
\r
197 var xy = Ext.Element.fly(this.dragData.ddel).getXY();
\r
205 // Utility functions
\r
207 function shortName(name){
\r
208 if(name.length > 15){
\r
209 return name.substr(0, 12) + '...';
\r