[Commits] r381 - in sandbox/opengeo/geoexplorer: examples lib/GeoExt/widgets/tree

[commits at geoext.org]

Author: tschaub
Date: 2009-04-14 20:50:41 +0200 (Tue, 14 Apr 2009)
New Revision: 381

Modified:
   sandbox/opengeo/geoexplorer/examples/treenodes.js
   sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tree/LayerContainer.js
Log:
Support drag-drop reordering of layer nodes in a layer container.

Modified: sandbox/opengeo/geoexplorer/examples/treenodes.js
===================================================================
--- sandbox/opengeo/geoexplorer/examples/treenodes.js	2009-04-14 18:49:55 UTC (rev 380)
+++ sandbox/opengeo/geoexplorer/examples/treenodes.js	2009-04-14 18:50:41 UTC (rev 381)
@@ -73,6 +73,7 @@
             leaf: false,
             expanded: true
         }),
+        enableDD: true,
         width: 170,
         height: 300,
         floating: true,

Modified: sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tree/LayerContainer.js
===================================================================
--- sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tree/LayerContainer.js	2009-04-14 18:49:55 UTC (rev 380)
+++ sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tree/LayerContainer.js	2009-04-14 18:50:41 UTC (rev 381)
@@ -59,15 +59,8 @@
                 this.addLayerNode(record);
             }, this);
             this.layerStore.on({
-                "add": function(store, records, index) {
-                    var nodeIndex = this.recordIndexToNodeIndex(index);
-                    for(var i=0; i<records.length; ++i) {
-                        this.addLayerNode(records[i], nodeIndex);
-                    }
-                },
-                "remove": function(store, record, index) {
-                    this.removeLayerNode(record);
-                },
+                "add": this.onStoreAdd,
+                "remove": this.onStoreRemove,
                 scope: this
             });
         }
@@ -75,6 +68,50 @@
     },
     
     /**
+     * Method: onStoreAdd
+     * Listener for the store's add event.
+     *
+     * Parameters:
+     * store - {Ext.data.Store}
+     * records - {Array(Ext.data.Record)}
+     * index - {Number}
+     */
+    onStoreAdd: function(store, records, index) {
+        if(!this._reordering) {
+            var nodeIndex = this.recordIndexToNodeIndex(index);
+            for(var i=0; i<records.length; ++i) {
+                this.addLayerNode(records[i], nodeIndex);
+            }
+        }
+    },
+    
+    /**
+     * Method: onStoreRemove
+     * Listener for the store's remove event.
+     *
+     * Parameters:
+     * store - {Ext.data.Store}
+     * record - {Ext.data.Record}
+     * index - {Number}
+     */
+    onStoreRemove: function(store, record, index) {
+        if(!this._reordering) {
+            this.removeLayerNode(record);
+        }
+    },
+
+    /**
+     * Method: destroy
+     */
+    destroy: function() {
+        if(this.layerStore) {
+            this.layerStore.un("add", this.onStoreAdd, this);
+            this.layerStore.un("remove", this.onStoreRemove, this);
+        }
+        GeoExt.tree.LayerContainer.superclass.render.apply(this, arguments);
+    },
+    
+    /**
      * Method: recordIndexToNodeIndex
      * Convert a record index into a child node index.
      *
@@ -100,6 +137,31 @@
     },
     
     /**
+     * Method: nodeIndexToRecordIndex
+     * Convert a child node index to a record index.
+     *
+     * Parameters:
+     * index - {Number} The child node index.
+     *
+     * Returns:
+     * {Number} The appropriate record index for the node.
+     */
+    nodeIndexToRecordIndex: function(index) {
+        var store = this.layerStore;
+        var count = store.getCount();
+        var nodeIndex = -1;
+        for(var i=count-1; i>=0; --i) {
+            if(store.getAt(i).get("layer").displayInLayerSwitcher) {
+                ++nodeIndex;
+                if(index === nodeIndex) {
+                    break;
+                }
+            }
+        }
+        return i;
+    },
+    
+    /**
      * Method: addLayerNode
      * Adds a child node representing a layer of the map
      * 
@@ -122,6 +184,7 @@
             } else {
                 this.appendChild(node);
             }
+            node.on("move", this.onChildMove, this);
         }
     },
     
@@ -139,10 +202,40 @@
                 return node.layer == layer;
             });
             if(node) {
+                node.un("move", this.onChildMove, this);
                 node.remove();
             }
     	}
+    },
+    
+    /**
+     * Method: onChildMove
+     * Listener for child node "move" events.  This updates the order of
+     *     records in the store based on new node order if the node has not
+     *     changed parents.
+     *
+     * Parameters:
+     * tree - {Ext.data.Tree}
+     * node - {Ext.tree.TreeNode}
+     * oldParent - {Ext.tree.TreeNode}
+     * newParent - {Ext.tree.TreeNode}
+     * index {Number}
+     */
+    onChildMove: function(tree, node, oldParent, newParent, index) {
+        if(oldParent === newParent) {
+            var newRecordIndex = this.nodeIndexToRecordIndex(index);
+            var oldRecordIndex = this.layerStore.findBy(function(record) {
+                return record.get("layer") === node.layer;
+            });
+            // remove the record and re-insert it at the correct index
+            var record = this.layerStore.getAt(oldRecordIndex);
+            this._reordering = true;
+            this.layerStore.remove(record);
+            this.layerStore.insert(newRecordIndex, [record]);
+            delete this._reordering;
+        }
     }
+    
 });
 
 /**