4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 Roo.tree.TreeNodeUI.prototype.initEvents =
13 Roo.tree.TreeNodeUI.prototype.initEvents.createSequence(function(){
14 if(this.node.attributes.tipCfg){
15 var o = this.node.attributes.tipCfg;
16 o.target = Roo.id(this.textNode);
17 Roo.QuickTips.register(o);
21 var TreeTest = function(){
29 var layout = new Roo.BorderLayout('layout', {
41 var albums = layout.getEl().createChild({tag:'div', id:'albums'});
42 var tb = new Roo.Toolbar(albums.createChild({tag:'div'}));
45 cls: 'x-btn-text-icon album-btn',
47 var node = root.appendChild(new Tree.TreeNode({
48 text:'Album ' + (++newIndex),
52 tree.getSelectionModel().select(node);
53 setTimeout(function(){
54 tree.editor.editNode = node;
55 tree.editor.startEdit(node.ui.textNode);
59 var viewEl = albums.createChild({tag:'div', id:'folders'});
61 var folders = layout.add('west', new Roo.ContentPanel(albums, {
70 var images = layout.add('center', new Roo.ContentPanel('images', {
76 var imgBody = images.getEl();
78 tree = new Tree.TreePanel(viewEl, {
81 containerScroll: true,
82 ddGroup: 'organizerDD',
91 blankText:'A name is required',
95 beforenodeedit : function(tr, n) {
101 var root = new Tree.TreeNode({
106 tree.setRootNode(root);
109 new Tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
110 new Tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
111 new Tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
119 // create the required templates
120 var tpl = new Roo.Template(
121 '<div class="thumb-wrap" id="{name}">' +
122 '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>' +
123 '<span>{shortName}</span></div>'
126 var qtipTpl = new Roo.Template(
127 '<div class="image-tip"><img src="../view/{url}" align="left">'+
128 '<b>Image Name:</b>' +
129 '<span>{name}</span>' +
131 '<span>{sizeString}</span></div>'
135 // initialize the View
136 var view = new Roo.JsonView(imgBody, tpl, {
143 view.prepareData = function(data){
144 data.shortName = data.name.ellipse(15);
145 data.sizeString = (Math.round(((data.size*10) / 1024))/10) + " KB";
146 //data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
147 data.qtip = new String(qtipTpl.applyTemplate(data));
148 lookup[data.name] = data;
152 var dragZone = new ImageDragZone(view, {containerScroll:true,
153 ddGroup: 'organizerDD'});
156 url: '../view/get-images.php'
159 var rz = new Roo.Resizable('layout', {
165 rz.on('resize', function(){
168 rz.resizeTo(650, 350);
173 Roo.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
176 * Create a DragZone instance for our JsonView
178 ImageDragZone = function(view, config){
180 ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
182 Roo.extend(ImageDragZone, Roo.dd.DragZone, {
183 // We don't want to register our image elements, so let's
184 // override the default registry lookup to fetch the image
185 // from the event instead
186 getDragData : function(e){
187 e = Roo.EventObject.setEvent(e);
188 var target = e.getTarget('.thumb-wrap');
190 var view = this.view;
191 if(!view.isSelected(target)){
192 view.select(target, e.ctrlKey);
194 var selNodes = view.getSelectedNodes();
198 if(selNodes.length == 1){
199 dragData.ddel = target.firstChild.firstChild; // the img element
200 dragData.single = true;
202 var div = document.createElement('div'); // create the multi element drag "ghost"
203 div.className = 'multi-proxy';
204 for(var i = 0, len = selNodes.length; i < len; i++){
205 div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));
207 div.appendChild(document.createElement('br'));
211 dragData.multi = true;
218 // this method is called by the TreeDropZone after a node drop
219 // to get the new tree node (there are also other way, but this is easiest)
220 getTreeNode : function(){
222 var nodeData = this.view.getNodeData(this.dragData.nodes);
223 for(var i = 0, len = nodeData.length; i < len; i++){
224 var data = nodeData[i];
225 treeNodes.push(new Roo.tree.TreeNode({
237 // the default action is to "highlight" after a bad drop
238 // but since an image can't be highlighted, let's frame it
239 afterRepair:function(){
240 for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
241 Roo.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
243 this.dragging = false;
246 // override the default repairXY with one offset for the margins and padding
247 getRepairXY : function(e){
248 if(!this.dragData.multi){
249 var xy = Roo.Element.fly(this.dragData.ddel).getXY();
259 String.prototype.ellipse = function(maxLength){
260 if(this.length > maxLength){
261 return this.substr(0, maxLength-3) + '...';