examples/image-organizer/imgorg/AlbumTree.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Imgorg.AlbumTree = Ext.extend(Ext.tree.TreePanel,{
   8     initComponent: function() {
   9         Ext.apply(this,{
  10             loader: new Ext.ux.tree.DirectTreeLoader({
  11                 api: Imgorg.ss.Albums
  12             }),
  13             root: new Ext.tree.TreeNode({
  14                 text:'dummynode',
  15                 expanded: true,
  16                 leaf: false,
  17                 cls:'album-node'
  18             }),
  19             rootVisible: false,
  20             clearOnLoad: false,
  21             autoScroll: true,
  22             containerScroll: true,
  23             enableDrop: true,
  24             dropConfig: {
  25                 ddGroup: 'organizerDD',
  26                 notifyDrop: this.onNotifyDrop.createDelegate(this)
  27             }
  28         });
  29         Imgorg.AlbumTree.superclass.initComponent.call(this);
  30         this.loader.load(this.root);
  31
  32         this.editor = new Ext.tree.TreeEditor(this, {
  33             allowBlank: false,
  34             blankText: 'A name is required',
  35             selectOnFocus: true
  36         });
  37         this.editor.on('complete', this.onEditComplete, this);
  38         this.on('contextmenu', this.onContextMenu, this);
  39     },
  40
  41     onContextMenu: function(node, e) {
  42         e.stopEvent();
  43         if(!this.contMenu) {
  44             this.contMenu = new Ext.menu.Menu({
  45                 items: [{
  46                     text: 'Remove',
  47                     handler: function() {
  48                         var node = this.currentNode;
  49                         node.unselect();
  50                         Ext.fly(node.ui.elNode).ghost('l', {
  51                             callback: function() {
  52                                 Imgorg.ss.Albums.remove({
  53                                     album: node.id
  54                                 });
  55                                 node.remove();
  56                             }, scope: node, duration: 0.4
  57                         });
  58                     },
  59                     scope: this
  60                 }]
  61             });
  62         }
  63         this.currentNode = node;
  64         this.contMenu.showAt(e.getXY());
  65     },
  66
  67     onNotifyDrop: function(src, e, data) {
  68         var nodes = data.nodes;
  69         var nodeIds = [];
  70         for (var i = 0;i < nodes.length;i++) {
  71             nodeIds.push(nodes[i].id);
  72         }
  73         this.addToAlbum(nodeIds, this.dropZone.dragOverData.target.attributes.id);
  74         return true; // cancell repair anim
  75     },
  76
  77     addToAlbum: function(nodes, album) {
  78         Imgorg.ss.Images.addToAlbum({
  79             images: nodes,
  80             album: album
  81         });
  82     },
  83
  84     addAlbum: function() {
  85         var root = this.root;
  86         var node = root.appendChild(new Ext.tree.TreeNode({
  87             text:'Album',
  88             cls:'album-node',
  89             allowDrag:false
  90         }));
  91         this.getSelectionModel().select(node);
  92         var ge = this.editor;
  93         setTimeout(function(){
  94             ge.editNode = node;
  95             ge.startEdit(node.ui.textNode);
  96         }, 10);
  97     },
  98
  99     onEditComplete: function(editor, newVal, oldVal) {
 100         var n = editor.editNode;
 101         Imgorg.ss.Albums.addOrUpdate({node: n.id, text: newVal, id: n.attributes.id});
 102     }
 103 });
 104 Ext.reg('img-albumtree', Imgorg.AlbumTree);
 105
 106 Ext.ns('Ext.ux.tree');
 107 Ext.ux.tree.DirectTreeLoader = Ext.extend(Ext.tree.TreeLoader,{
 108     baseAttrs: {
 109         cls:'album-node'
 110     },
 111
 112     load : function(node, callback){
 113         this.requestData(node, callback);
 114     },
 115
 116     requestData : function(node, callback){
 117         if(this.fireEvent("beforeload", this, node, callback) !== false){
 118             this.api.loadtree({
 119                 node: node.id
 120             }, this.processResponse.createDelegate(this, [node, callback], true));
 121         }else{
 122             // if the load is cancelled, make sure we notify
 123             // the node that we are done
 124             if(typeof callback == "function"){
 125                 callback();
 126             }
 127         }
 128     },
 129
 130     processResponse : function(res, trans, node, callback){
 131         try {
 132             node.beginUpdate();
 133             for(var i = 0, len = res.length; i < len; i++){
 134                 var n = this.createNode(res[i]);
 135                 if(n){
 136                     node.appendChild(n);
 137                 }
 138             }
 139             node.endUpdate();
 140             if(typeof callback == "function"){
 141                 callback(this, node);
 142             }
 143         }catch(e){
 144             this.handleFailure(res);
 145         }
 146     }
 147 });