examples/organizer/organizer.js

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