X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/image-organizer/imgorg/AlbumTree.js

diff --git a/examples/image-organizer/imgorg/AlbumTree.js b/examples/image-organizer/imgorg/AlbumTree.js
new file mode 100644
index 00000000..959d4972
--- /dev/null
+++ b/examples/image-organizer/imgorg/AlbumTree.js
@@ -0,0 +1,147 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Imgorg.AlbumTree = Ext.extend(Ext.tree.TreePanel,{
+    initComponent: function() {
+        Ext.apply(this,{
+            loader: new Ext.ux.tree.DirectTreeLoader({
+                api: Imgorg.ss.Albums
+            }),
+            root: new Ext.tree.TreeNode({
+                text:'dummynode',
+                expanded: true,
+                leaf: false,
+                cls:'album-node'
+            }),
+            rootVisible: false,
+            clearOnLoad: false,
+            autoScroll: true,
+            containerScroll: true,
+            enableDrop: true,
+            dropConfig: {
+                ddGroup: 'organizerDD',
+                notifyDrop: this.onNotifyDrop.createDelegate(this)
+            }
+        });
+        Imgorg.AlbumTree.superclass.initComponent.call(this);
+        this.loader.load(this.root);
+        
+        this.editor = new Ext.tree.TreeEditor(this, {
+            allowBlank: false,
+            blankText: 'A name is required',
+            selectOnFocus: true
+        });
+        this.editor.on('complete', this.onEditComplete, this);
+        this.on('contextmenu', this.onContextMenu, this);
+    },
+    
+    onContextMenu: function(node, e) {
+        e.stopEvent();
+        if(!this.contMenu) {
+            this.contMenu = new Ext.menu.Menu({
+                items: [{
+                    text: 'Remove',
+                    handler: function() {
+                        var node = this.currentNode;
+                        node.unselect();
+                        Ext.fly(node.ui.elNode).ghost('l', {
+                            callback: function() {
+                                Imgorg.ss.Albums.remove({
+                                    album: node.id
+                                });
+                                node.remove();
+                            }, scope: node, duration: 0.4
+                        });
+                    },
+                    scope: this
+                }]
+            });
+        }
+        this.currentNode = node;
+        this.contMenu.showAt(e.getXY());
+    },
+    
+    onNotifyDrop: function(src, e, data) {
+        var nodes = data.nodes;
+        var nodeIds = [];
+        for (var i = 0;i < nodes.length;i++) {
+            nodeIds.push(nodes[i].id);
+        }
+        this.addToAlbum(nodeIds, this.dropZone.dragOverData.target.attributes.id);
+        return true; // cancell repair anim
+    },
+    
+    addToAlbum: function(nodes, album) {
+        Imgorg.ss.Images.addToAlbum({
+            images: nodes, 
+            album: album
+        });
+    },
+    
+    addAlbum: function() {
+        var root = this.root;
+        var node = root.appendChild(new Ext.tree.TreeNode({
+            text:'Album',
+            cls:'album-node',
+            allowDrag:false
+        }));
+        this.getSelectionModel().select(node);
+        var ge = this.editor;
+        setTimeout(function(){
+            ge.editNode = node;
+            ge.startEdit(node.ui.textNode);
+        }, 10);
+    },
+    
+    onEditComplete: function(editor, newVal, oldVal) {
+        var n = editor.editNode;
+        Imgorg.ss.Albums.addOrUpdate({node: n.id, text: newVal, id: n.attributes.id});
+    }
+});
+Ext.reg('img-albumtree', Imgorg.AlbumTree);
+
+Ext.ns('Ext.ux.tree');
+Ext.ux.tree.DirectTreeLoader = Ext.extend(Ext.tree.TreeLoader,{
+    baseAttrs: {
+        cls:'album-node'
+    },
+    
+    load : function(node, callback){
+        this.requestData(node, callback);
+    },
+    
+    requestData : function(node, callback){
+        if(this.fireEvent("beforeload", this, node, callback) !== false){
+            this.api.loadtree({
+                node: node.id
+            }, this.processResponse.createDelegate(this, [node, callback], true));
+        }else{
+            // if the load is cancelled, make sure we notify
+            // the node that we are done
+            if(typeof callback == "function"){
+                callback();
+            }
+        }
+    },
+    
+    processResponse : function(res, trans, node, callback){
+        try {
+            node.beginUpdate();
+            for(var i = 0, len = res.length; i < len; i++){
+                var n = this.createNode(res[i]);
+                if(n){
+                    node.appendChild(n);
+                }
+            }
+            node.endUpdate();
+            if(typeof callback == "function"){
+                callback(this, node);
+            }
+        }catch(e){
+            this.handleFailure(res);
+        }
+    }
+});
\ No newline at end of file