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