+++ /dev/null
-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">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
-<div id="method-App.user.FormPanel-ImageDragZone"></div>/**\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
-</pre> \r
-</body>\r
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff