examples/organizer/organizer.js

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