examples/organizer/organizer.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){\r
   8 \r
   9     Ext.QuickTips.init();\r
  10     // Album toolbar\r
  11     var newIndex = 3;\r
  12     var tb = new Ext.Toolbar({\r
  13         items:[{\r
  14             text: 'New Album',\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
  19                     cls:'album-node',\r
  20                     allowDrag:false\r
  21                 }));\r
  22                 tree.getSelectionModel().select(node);\r
  23                 setTimeout(function(){\r
  24                     ge.editNode = node;\r
  25                     ge.startEdit(node.ui.textNode);\r
  26                 }, 10);\r
  27             }\r
  28         }]\r
  29     });\r
  30 \r
  31     // set up the Album tree\r
  32     var tree = new Ext.tree.TreePanel({\r
  33          // tree\r
  34          animate:true,\r
  35          enableDD:true,\r
  36          containerScroll: true,\r
  37          ddGroup: 'organizerDD',\r
  38          rootVisible:false,\r
  39          // layout\r
  40          region:'west',\r
  41          width:200,\r
  42          split:true,\r
  43          // panel\r
  44          title:'My Albums',\r
  45          autoScroll:true,\r
  46          tbar: tb,\r
  47          margins: '5 0 5 5'\r
  48     });\r
  49 \r
  50     var root = new Ext.tree.TreeNode({\r
  51         text: 'Albums',\r
  52         allowDrag:false,\r
  53         allowDrop:false\r
  54     });\r
  55     tree.setRootNode(root);\r
  56 \r
  57     root.appendChild(\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
  61     );\r
  62 \r
  63     // add an inline editor for the nodes\r
  64     var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {\r
  65         allowBlank:false,\r
  66         blankText:'A name is required',\r
  67         selectOnFocus:true\r
  68     });\r
  69 \r
  70     // Set up images view\r
  71 \r
  72     var view = new Ext.DataView({\r
  73         itemSelector: 'div.thumb-wrap',\r
  74         style:'overflow:auto',\r
  75         multiSelect: true,\r
  76         plugins: new Ext.DataView.DragSelector({dragSafe:true}),\r
  77         store: new Ext.data.JsonStore({\r
  78             url: '../view/get-images.php',\r
  79             autoLoad: true,\r
  80             root: 'images',\r
  81             id:'name',\r
  82             fields:[\r
  83                 'name', 'url',\r
  84                 {name: 'shortName', mapping: 'name', convert: shortName}\r
  85             ]\r
  86         }),\r
  87         tpl: new Ext.XTemplate(\r
  88             '<tpl for=".">',\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
  92             '</tpl>'\r
  93         )\r
  94     });\r
  95 \r
  96     var images = new Ext.Panel({\r
  97         id:'images',\r
  98         title:'My Images',\r
  99         region:'center',\r
 100         margins: '5 5 5 0',\r
 101         layout:'fit',\r
 102         \r
 103         items: view\r
 104     });\r
 105 \r
 106     var layout = new Ext.Panel({\r
 107         layout: 'border',\r
 108         width:650,\r
 109         height:400,\r
 110         items: [tree, images]\r
 111     });\r
 112 \r
 113     layout.render('layout');\r
 114 \r
 115     var dragZone = new ImageDragZone(view, {containerScroll:true,\r
 116         ddGroup: 'organizerDD'});\r
 117 });\r
 118 \r
 119 \r
 120 \r
 121 /**\r
 122  * Create a DragZone instance for our JsonView\r
 123  */\r
 124 ImageDragZone = function(view, config){\r
 125     this.view = view;\r
 126     ImageDragZone.superclass.constructor.call(this, view.getEl(), config);\r
 127 };\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
 134         if(target){\r
 135             var view = this.view;\r
 136             if(!view.isSelected(target)){\r
 137                 view.onClick(e);\r
 138             }\r
 139             var selNodes = view.getSelectedNodes();\r
 140             var dragData = {\r
 141                 nodes: selNodes\r
 142             };\r
 143             if(selNodes.length == 1){\r
 144                 dragData.ddel = target;\r
 145                 dragData.single = true;\r
 146             }else{\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
 153                     }\r
 154                 }\r
 155                 var count = document.createElement('div'); // selected image count\r
 156                 count.innerHTML = i + ' images selected';\r
 157                 div.appendChild(count);\r
 158                 \r
 159                 dragData.ddel = div;\r
 160                 dragData.multi = true;\r
 161             }\r
 162             return dragData;\r
 163         }\r
 164         return false;\r
 165     },\r
 166 \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
 175                 text: data.name,\r
 176                 icon: '../view/'+data.url,\r
 177                 data: data,\r
 178                 leaf:true,\r
 179                 cls: 'image-node'\r
 180             }));\r
 181         }\r
 182         return treeNodes;\r
 183     },\r
 184     \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
 190         }\r
 191         this.dragging = false;    \r
 192     },\r
 193     \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
 198             xy[0]+=3;xy[1]+=3;\r
 199             return xy;\r
 200         }\r
 201         return false;\r
 202     }\r
 203 });\r
 204 \r
 205 // Utility functions\r
 206 \r
 207 function shortName(name){\r
 208     if(name.length > 15){\r
 209         return name.substr(0, 12) + '...';\r
 210     }\r
 211     return name;\r
 212 };\r