3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
12 var tb = new Ext.Toolbar({
17 var node = root.appendChild(new Ext.tree.TreeNode({
18 text:'Album ' + (++newIndex),
22 tree.getSelectionModel().select(node);
23 setTimeout(function(){
25 ge.startEdit(node.ui.textNode);
31 // set up the Album tree
32 var tree = new Ext.tree.TreePanel({
36 containerScroll: true,
37 ddGroup: 'organizerDD',
50 var root = new Ext.tree.TreeNode({
55 tree.setRootNode(root);
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})
63 // add an inline editor for the nodes
64 var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
66 blankText:'A name is required',
72 var view = new Ext.DataView({
73 itemSelector: 'div.thumb-wrap',
74 style:'overflow:auto',
76 plugins: new Ext.DataView.DragSelector({dragSafe:true}),
77 store: new Ext.data.JsonStore({
78 url: '../view/get-images.php',
84 {name: 'shortName', mapping: 'name', convert: shortName}
87 tpl: new Ext.XTemplate(
89 '<div class="thumb-wrap" id="{name}">',
90 '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>',
91 '<span>{shortName}</span></div>',
96 var images = new Ext.Panel({
106 var layout = new Ext.Panel({
110 items: [tree, images]
113 layout.render('layout');
115 var dragZone = new ImageDragZone(view, {containerScroll:true,
116 ddGroup: 'organizerDD'});
122 * Create a DragZone instance for our JsonView
124 ImageDragZone = function(view, config){
126 ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
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');
135 var view = this.view;
136 if(!view.isSelected(target)){
139 var selNodes = view.getSelectedNodes();
143 if(selNodes.length == 1){
144 dragData.ddel = target;
145 dragData.single = true;
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
152 div.appendChild(document.createElement('br'));
155 var count = document.createElement('div'); // selected image count
156 count.innerHTML = i + ' images selected';
157 div.appendChild(count);
160 dragData.multi = true;
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(){
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({
176 icon: '../view/'+data.url,
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);
191 this.dragging = false;
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();
207 function shortName(name){
208 if(name.length > 15){
209 return name.substr(0, 12) + '...';