Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / organizer / organizer.js
index 983ed88..baac9df 100644 (file)
 /*!
 /*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
  */
-Ext.onReady(function(){\r
-\r
-    Ext.QuickTips.init();\r
-    // Album toolbar\r
-    var newIndex = 3;\r
-    var tb = new Ext.Toolbar({\r
-        items:[{\r
-            text: 'New Album',\r
-            iconCls: 'album-btn',\r
-            handler: function(){\r
-                var node = root.appendChild(new Ext.tree.TreeNode({\r
-                    text:'Album ' + (++newIndex),\r
-                    cls:'album-node',\r
-                    allowDrag:false\r
-                }));\r
-                tree.getSelectionModel().select(node);\r
-                setTimeout(function(){\r
-                    ge.editNode = node;\r
-                    ge.startEdit(node.ui.textNode);\r
-                }, 10);\r
-            }\r
-        }]\r
-    });\r
-\r
-    // set up the Album tree\r
-    var tree = new Ext.tree.TreePanel({\r
-         // tree\r
-         animate:true,\r
-         enableDD:true,\r
-         containerScroll: true,\r
-         ddGroup: 'organizerDD',\r
-         rootVisible:false,\r
-         // layout\r
-         region:'west',\r
-         width:200,\r
-         split:true,\r
-         // panel\r
-         title:'My Albums',\r
-         autoScroll:true,\r
-         tbar: tb,\r
-         margins: '5 0 5 5'\r
-    });\r
-\r
-    var root = new Ext.tree.TreeNode({\r
-        text: 'Albums',\r
-        allowDrag:false,\r
-        allowDrop:false\r
-    });\r
-    tree.setRootNode(root);\r
-\r
-    root.appendChild(\r
-        new Ext.tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),\r
-        new Ext.tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),\r
-        new Ext.tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})\r
-    );\r
-\r
-    // add an inline editor for the nodes\r
-    var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {\r
-        allowBlank:false,\r
-        blankText:'A name is required',\r
-        selectOnFocus:true\r
-    });\r
-\r
-    // Set up images view\r
-\r
-    var view = new Ext.DataView({\r
-        itemSelector: 'div.thumb-wrap',\r
-        style:'overflow:auto',\r
-        multiSelect: true,\r
-        plugins: new Ext.DataView.DragSelector({dragSafe:true}),\r
-        store: new Ext.data.JsonStore({\r
-            url: '../view/get-images.php',\r
-            autoLoad: true,\r
-            root: 'images',\r
-            id:'name',\r
-            fields:[\r
-                'name', 'url',\r
-                {name: 'shortName', mapping: 'name', convert: shortName}\r
-            ]\r
-        }),\r
-        tpl: new Ext.XTemplate(\r
-            '<tpl for=".">',\r
-            '<div class="thumb-wrap" id="{name}">',\r
-            '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>',\r
-            '<span>{shortName}</span></div>',\r
-            '</tpl>'\r
-        )\r
-    });\r
-\r
-    var images = new Ext.Panel({\r
-        id:'images',\r
-        title:'My Images',\r
-        region:'center',\r
-        margins: '5 5 5 0',\r
-        layout:'fit',\r
-        \r
-        items: view\r
-    });\r
-\r
-    var layout = new Ext.Panel({\r
-        layout: 'border',\r
-        width:650,\r
-        height:400,\r
-        items: [tree, images]\r
-    });\r
-\r
-    layout.render('layout');\r
-\r
-    var dragZone = new ImageDragZone(view, {containerScroll:true,\r
-        ddGroup: 'organizerDD'});\r
-});\r
-\r
-\r
-\r
-/**\r
- * Create a DragZone instance for our JsonView\r
- */\r
-ImageDragZone = function(view, config){\r
-    this.view = view;\r
-    ImageDragZone.superclass.constructor.call(this, view.getEl(), config);\r
-};\r
-Ext.extend(ImageDragZone, Ext.dd.DragZone, {\r
-    // We don't want to register our image elements, so let's \r
-    // override the default registry lookup to fetch the image \r
-    // from the event instead\r
-    getDragData : function(e){\r
-        var target = e.getTarget('.thumb-wrap');\r
-        if(target){\r
-            var view = this.view;\r
-            if(!view.isSelected(target)){\r
-                view.onClick(e);\r
-            }\r
-            var selNodes = view.getSelectedNodes();\r
-            var dragData = {\r
-                nodes: selNodes\r
-            };\r
-            if(selNodes.length == 1){\r
-                dragData.ddel = target;\r
-                dragData.single = true;\r
-            }else{\r
-                var div = document.createElement('div'); // create the multi element drag "ghost"\r
-                div.className = 'multi-proxy';\r
-                for(var i = 0, len = selNodes.length; i < len; i++){\r
-                    div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only\r
-                    if((i+1) % 3 == 0){\r
-                        div.appendChild(document.createElement('br'));\r
-                    }\r
-                }\r
-                var count = document.createElement('div'); // selected image count\r
-                count.innerHTML = i + ' images selected';\r
-                div.appendChild(count);\r
-                \r
-                dragData.ddel = div;\r
-                dragData.multi = true;\r
-            }\r
-            return dragData;\r
-        }\r
-        return false;\r
-    },\r
-\r
-    // this method is called by the TreeDropZone after a node drop\r
-    // to get the new tree node (there are also other way, but this is easiest)\r
-    getTreeNode : function(){\r
-        var treeNodes = [];\r
-        var nodeData = this.view.getRecords(this.dragData.nodes);\r
-        for(var i = 0, len = nodeData.length; i < len; i++){\r
-            var data = nodeData[i].data;\r
-            treeNodes.push(new Ext.tree.TreeNode({\r
-                text: data.name,\r
-                icon: '../view/'+data.url,\r
-                data: data,\r
-                leaf:true,\r
-                cls: 'image-node'\r
-            }));\r
-        }\r
-        return treeNodes;\r
-    },\r
-    \r
-    // the default action is to "highlight" after a bad drop\r
-    // but since an image can't be highlighted, let's frame it \r
-    afterRepair:function(){\r
-        for(var i = 0, len = this.dragData.nodes.length; i < len; i++){\r
-            Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);\r
-        }\r
-        this.dragging = false;    \r
-    },\r
-    \r
-    // override the default repairXY with one offset for the margins and padding\r
-    getRepairXY : function(e){\r
-        if(!this.dragData.multi){\r
-            var xy = Ext.Element.fly(this.dragData.ddel).getXY();\r
-            xy[0]+=3;xy[1]+=3;\r
-            return xy;\r
-        }\r
-        return false;\r
-    }\r
-});\r
-\r
-// Utility functions\r
-\r
-function shortName(name){\r
-    if(name.length > 15){\r
-        return name.substr(0, 12) + '...';\r
-    }\r
-    return name;\r
-};\r
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+    // Album toolbar
+    var newIndex = 3;
+    var tb = new Ext.Toolbar({
+        items:[{
+            text: 'New Album',
+            iconCls: 'album-btn',
+            handler: function(){
+                var node = root.appendChild(new Ext.tree.TreeNode({
+                    text:'Album ' + (++newIndex),
+                    cls:'album-node',
+                    allowDrag:false
+                }));
+                tree.getSelectionModel().select(node);
+                setTimeout(function(){
+                    ge.editNode = node;
+                    ge.startEdit(node.ui.textNode);
+                }, 10);
+            }
+        }]
+    });
+
+    // set up the Album tree
+    var tree = new Ext.tree.TreePanel({
+         // tree
+         animate:true,
+         enableDD:true,
+         containerScroll: true,
+         ddGroup: 'organizerDD',
+         rootVisible:false,
+         // layout
+         region:'west',
+         width:200,
+         split:true,
+         // panel
+         title:'My Albums',
+         autoScroll:true,
+         tbar: tb,
+         margins: '5 0 5 5'
+    });
+
+    var root = new Ext.tree.TreeNode({
+        text: 'Albums',
+        allowDrag:false,
+        allowDrop:false
+    });
+    tree.setRootNode(root);
+
+    root.appendChild(
+        new Ext.tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
+        new Ext.tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
+        new Ext.tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
+    );
+
+    // add an inline editor for the nodes
+    var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
+        allowBlank:false,
+        blankText:'A name is required',
+        selectOnFocus:true
+    });
+
+    // Set up images view
+
+    var view = new Ext.DataView({
+        itemSelector: 'div.thumb-wrap',
+        style:'overflow:auto',
+        multiSelect: true,
+        plugins: new Ext.DataView.DragSelector({dragSafe:true}),
+        store: new Ext.data.JsonStore({
+            url: '../view/get-images.php',
+            autoLoad: true,
+            root: 'images',
+            id:'name',
+            fields:[
+                'name', 'url',
+                {name: 'shortName', mapping: 'name', convert: shortName}
+            ]
+        }),
+        tpl: new Ext.XTemplate(
+            '<tpl for=".">',
+            '<div class="thumb-wrap" id="{name}">',
+            '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>',
+            '<span>{shortName}</span></div>',
+            '</tpl>'
+        )
+    });
+
+    var images = new Ext.Panel({
+        id:'images',
+        title:'My Images',
+        region:'center',
+        margins: '5 5 5 0',
+        layout:'fit',
+        
+        items: view
+    });
+
+    var layout = new Ext.Panel({
+        layout: 'border',
+        width:650,
+        height:400,
+        items: [tree, images]
+    });
+
+    layout.render('layout');
+
+    var dragZone = new ImageDragZone(view, {containerScroll:true,
+        ddGroup: 'organizerDD'});
+});
+
+
+
+/**
+ * Create a DragZone instance for our JsonView
+ */
+ImageDragZone = function(view, config){
+    this.view = view;
+    ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
+};
+Ext.extend(ImageDragZone, Ext.dd.DragZone, {
+    // We don't want to register our image elements, so let's 
+    // override the default registry lookup to fetch the image 
+    // from the event instead
+    getDragData : function(e){
+        var target = e.getTarget('.thumb-wrap');
+        if(target){
+            var view = this.view;
+            if(!view.isSelected(target)){
+                view.onClick(e);
+            }
+            var selNodes = view.getSelectedNodes();
+            var dragData = {
+                nodes: selNodes
+            };
+            if(selNodes.length == 1){
+                dragData.ddel = target;
+                dragData.single = true;
+            }else{
+                var div = document.createElement('div'); // create the multi element drag "ghost"
+                div.className = 'multi-proxy';
+                for(var i = 0, len = selNodes.length; i < len; i++){
+                    div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
+                    if((i+1) % 3 == 0){
+                        div.appendChild(document.createElement('br'));
+                    }
+                }
+                var count = document.createElement('div'); // selected image count
+                count.innerHTML = i + ' images selected';
+                div.appendChild(count);
+                
+                dragData.ddel = div;
+                dragData.multi = true;
+            }
+            return dragData;
+        }
+        return false;
+    },
+
+    // this method is called by the TreeDropZone after a node drop
+    // to get the new tree node (there are also other way, but this is easiest)
+    getTreeNode : function(){
+        var treeNodes = [];
+        var nodeData = this.view.getRecords(this.dragData.nodes);
+        for(var i = 0, len = nodeData.length; i < len; i++){
+            var data = nodeData[i].data;
+            treeNodes.push(new Ext.tree.TreeNode({
+                text: data.name,
+                icon: '../view/'+data.url,
+                data: data,
+                leaf:true,
+                cls: 'image-node'
+            }));
+        }
+        return treeNodes;
+    },
+    
+    // the default action is to "highlight" after a bad drop
+    // but since an image can't be highlighted, let's frame it 
+    afterRepair:function(){
+        for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
+            Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
+        }
+        this.dragging = false;    
+    },
+    
+    // override the default repairXY with one offset for the margins and padding
+    getRepairXY : function(e){
+        if(!this.dragData.multi){
+            var xy = Ext.Element.fly(this.dragData.ddel).getXY();
+            xy[0]+=3;xy[1]+=3;
+            return xy;
+        }
+        return false;
+    }
+});
+
+// Utility functions
+
+function shortName(name){
+    if(name.length > 15){
+        return name.substr(0, 12) + '...';
+    }
+    return name;
+};