Hello Frank,
thank you for sharing the code.
The parents reordering was the next step :)
Francesco
-------"Valiquette,Francois [Montreal]" wrote--------
Subject: RE: [Users] TR: Enabling drag n drop in the
Ext.tree.TreePanel(enableDD)
Date: 19.02.2013 16:27
Hello,
>
> My code does not use the best OO practices, I hade to deal with a pre
> coded application. So there is a lot of global variables.
>
> This code will even let you reorder the parents. ;)
>
> var oldServerIndex, newServerIndex, oldIndex, newIndex,
> indexVariation;
> var recursiveCall = false;
> var reader = new GeoExt.data.WMSCapabilitiesReader();
>
> //Add a WMS server to our LayerTree
> function addWMServerToTree(serverUrl) {
> var serverNode = new Ext.tree.TreeNode({
> id: serverUrl,
> text: serverUrl,
> leaf: false,
> allowDrop: true,
> allowDrag: true,
> draggable: true
> });
>
> //Keeping the old server node position in case the move is illegal
> and we want to revert it
> serverNode.addListener('beforemove', function (tree, thisNode,
> oldParent, newParent, index) {
> oldServerIndex = oldParent.indexOf(thisNode);
> });
>
> serverNode.addListener('move', function (tree, thisNode, oldParent,
> newParent, index) {
> //The move is allowed if the node is moved within the same parent
> if (oldParent == newParent) {
> newServerIndex = thisNode.parentNode.indexOf(thisNode);
> reorderMapLayerAfterServerMove(thisNode, oldServerIndex,
> newServerIndex);
> //Otherwise the move is not allowed and we revert the change
> } else if (recursiveCall == false) {
> //Moving back the old node to the old position will trigger again the
> move event, thus we do not whant the event to be called more than one
> time
> //to avoid an infinite loop
> recursiveCall = true;
>
> //Now we want to revert the change, thus we want to move back the
> node to it's old position.
> //If we move it right away it won't work, since the node won't be
> moved in it's new parent until the 'move'
> //event is completed. Thus, we trigger an Ext.MessageBox.alert that
> will not stop the execution flow of This.move.
> //When the user will click on 'OK', the move event should be
> finished.
> Ext.MessageBox.alert('Error', 'This move is not allowed', function
> reverseChange(btn, texte, opt) {
> oldParent.insertBefore(thisNode, oldParent.item(oldServerIndex));
> recursiveCall = false;
> });
> }
> });
>
> var serverLayers = new Array();
> var store = new GeoExt.data.WMSCapabilitiesStore({
> url: OpenLayers.ProxyHost + serverUrl,
> reader: reader
> });
>
> store.load({
> callback: function () {
> store.each(function (record) {
> //Does not work, so we set the newParams manually
> //record.getLayer().mergeNewParams(map_optionsWMS);
> record.getLayer().setVisibility(false);
> record.getLayer().buffer = 0;
> record.getLayer().opacity = 1;
>
> //We add new layers at the begining of the array, this will make the
> layer drawing order on top of the nodes that are
> //under this node in the tree
> serverLayers.unshift(record.getLayer());
>
> node = new GeoExt.tree.LayerNode({
> layer: record.getLayer(),
> nodeType: \"gx_layer\",
> checked: false,
> allowDrag: true,
> allowDrop: true,
> });
> node.addListener('checkChange', function (thisNode) {
>
> if (thisNode.attributes.checked == true) {
> geoExtOpacitySlider.layer = this.layer;
> geoExtOpacitySlider.setValue(this.layer.opacity * 100);
> thisNode.select();
> button_modelPlay.enable();
>
> } else if (layerTree.getChecked().length == 0) {
> button_modelPlay.disable();
> }
> });
>
> node.addListener('click', function (thisNode) {
> geoExtOpacitySlider.layer = this.layer;
> geoExtOpacitySlider.setValue(this.layer.opacity * 100);
> console.log(\"Node.layer.name : \" + this.layer.name);
> console.log(\"Node tree index : \" +
> thisNode.parentNode.indexOf(thisNode));
> console.log(\"map.getLayerIndex : \" + map.getLayerIndex(this.layer));
> });
>
> //Keeping the old layer node position in case the move is illegal and
> we want to revert it
> node.addListener('beforemove', function (tree, thisNode, oldParent,
> newParent, index) {
> oldIndex = oldParent.indexOf(thisNode);
> });
>
> node.addListener('move', function (tree, thisNode, oldParent,
> newParent, index) {
> //Same logic as with the ServerNode...
> if (oldParent == newParent) {
> indexVariation = oldIndex - oldParent.indexOf(thisNode);
> map.raiseLayer(thisNode.layer, indexVariation);
> } else if (recursiveCall == false) {
> recursiveCall = true;
> Ext.MessageBox.alert('Error', 'This move is not allow', function
> reverseChange(btn, texte, opt) {
> oldParent.insertBefore(thisNode, oldParent.item(oldIndex));
> recursiveCall = false;
>
> });
> }
>
> });
>
> serverNode.appendChild(node);
> });
> layerTreeRoot.insertBefore(serverNode, layerTreeRoot.firstChild);
> serverStore = new GeoExt.data.LayerStore({
> map: map,
> layers: serverLayers
> });
> }
> });
> };
> var nbOfNodesBetweenOldAndNewPosition, lowerNode;
> //This function reorder the drawing order after an user chage the
> order of a WMS server in the three.
> //A WMS server node that is above another WMS server should be drawed
> on top of the other WMS server on the map
> function reorderMapLayerAfterServerMove(serverNodeToMove,
> indexOfNodeServerBeforeMove, indexOfNodeServerAfterMove) {
>
> indexOfVariation = indexOfNodeServerBeforeMove -
> indexOfNodeServerAfterMove;
>
> //The node is moved above
> if (indexOfVariation < 0) {
> indexOfVariation = indexOfVariation * -1;
> //Compute the number of layer node between the old and the new
> position
> nbOfNodesBetweenOldAndNewPosition = 0;
> for (i = indexOfNodeServerBeforeMove; i < indexOfNodeServerAfterMove;
> i++) {
> nbOfNodesBetweenOldAndNewPosition +=
> serverNodeToMove.parentNode.item(i).childNodes.length;
> }
> //Le layer du node qui se trouve juste au dessus de la nouvelle
> position du node que l'on déplace
> //The layer that is just above the new position of the node we are
> moving
> lowerNode =
> map.layers.indexOf(serverNodeToMove.parentNode.item(indexOfNodeServerAfterMove
> - 1).lastChild.layer);
> //Moving the layers nodes
> for (i = 0; i < nbOfNodesBetweenOldAndNewPosition; i++) {
> map.raiseLayer(map.layers[lowerNode],
> nbOfNodesBetweenOldAndNewPosition + serverNodeToMove.childNodes.length
> - 1);
> }
> //The node is moved bellow
> } else {
> //Compute the number of layer node bewtween the old and the new
> position
> nbOfNodesBetweenOldAndNewPosition = 0;
> for (i = indexOfNodeServerAfterMove + 1; i <
> indexOfNodeServerBeforeMove + 1; i++) {
> nbOfNodesBetweenOldAndNewPosition +=
> serverNodeToMove.parentNode.item(i).childNodes.length;
> }
> lowerNode =
> map.layers.indexOf(serverNodeToMove.parentNode.item(indexOfNodeServerAfterMove).lastChild.layer);
> //Moving the layers nodes
> for (i = 0; i < serverNodeToMove.childNodes.length; i++) {
> map.raiseLayer(map.layers[lowerNode],
> nbOfNodesBetweenOldAndNewPosition + serverNodeToMove.childNodes.length
> - 1);
> }
> }
> };
>
> Frank
>
> -----Message d'origine-----
> De : Francesco D'Alesio [mailto:francesco.dale...@r3-gis.com]
> Envoyé : 19 février 2013 06:26
> À : Valiquette,Francois [Montreal]
> Cc : Julien-Samuel Lacroix; users@geoext.org
> Objet : Re: [Users] TR: Enabling drag n drop in the
> Ext.tree.TreePanel(enableDD)
>
> Hello François,
> thank you for sharing this code. It works!
>
> I need now to allow dragging only when the dragged record and the
> target
> record share the same parent (no dragging outside the layer's group).
> It seems that the code you described will solve my problem.
>
> Could you please paste it? :)
>
> Thank you
>
> Regards,
> Francesco
>
> Il 18/02/2013 15:32, Valiquette,Francois [Montreal] ha scritto:
> > Hello,
> >
> > As promised I give you the code I made to make drag and drop change
> the layer order of the nodes that are not using an
> GeoExt.tree.LayerContainer
> >
> > var indexVariation;
> >
> > node.addListener('beforemove', function (tree, thisNode, oldParent,
> newParent, index) {
> > oldIndex = oldParent.indexOf(thisNode);
> > });
> >
> > node.addListener('move', function (tree, thisNode, oldParent,
> newParent, index) {
> > indexVariation = oldIndex - oldParent.indexOf(thisNode);
> > map.raiseLayer(thisNode.layer, indexVariation);
> > );
> >
> >
> >
> > Furthermore, my code let users add multiple WMS servers. Each WMS
> server make a new child in the root tree node and then, the newly
> created tree node contains all the layers of the WMS server. Also,
> users are allowed to drag and drop layers but only within the same
> parents. Also, parents can be dragged to change the drawing order of
> the server, but they cannot be dragged inside another node.
> >
> > If anyone is interested of getting the code, just reply to this
> email and I'll copy/pate it.
> >
> >
> > François
> >
> >
> >
> > -----Message d'origine-----
> > De : Valiquette,Francois [Montreal]
> > Envoyé : 8 février 2013 13:56
> > À : 'Julien-Samuel Lacroix'; users@geoext.org
> > Objet : RE: [Users] TR: Enabling drag n drop in the
> Ext.tree.TreePanel(enableDD)
> >
> > Hello Julien,
> >
> > Thank you for your help, you almost remembered everything :)
> >
> > The function you were talking about is in LayerLoader.js and it is
> onChildMove
> >
> > I wrote up my own code since I manually create my own node. It was
> really simple. Next week, I will post my final function that will
> enable layers reordering between multiple WMS servers.
> >
> > François
> >
> > -----Message d'origine-----
> > De : users-boun...@geoext.org [mailto:users-boun...@geoext.org] De
> la part de Julien-Samuel Lacroix
> > Envoyé : 5 février 2013 14:36
> > À : users@geoext.org
> > Objet : Re: [Users] TR: Enabling drag n drop in the
> Ext.tree.TreePanel(enableDD)
> >
> > Hello,
> >
> > If I remember correctly, the LayerContainer class contains the code
> to
> > support the drag-drop. If you manually create the node, you have to
> add
> > the code by yourself. This is because the LayerContainer (and
> > sub-classes) know about other layers, but the node itself doesn't.
> >
> > If I continue to remember correctly, there's an event thrown on the
> drop
> > (of the drag-drop), simply check your node order there and change
> your
> > map layer order accordingly.
> >
> > I hope others can correct me if I'm wrong.
> >
> > Julien
> >
> > On 13-02-05 02:02 PM, Valiquette,Francois [Montreal] wrote:
> >> Hello,
> >>
> >> I am the original poster. I succeeded easily to change the drawing
> order
> >> of the layer with the drag and drop feature using a
> >> GeoExt.tree.LayerContainer. But I still cannot change the drawing
> order
> >> when I am manually creating my nodes (GeoExt.tree.LayerNode). By
> this, I
> >> mean, I can drag and drop but nothing happens.
> >>
> >> I will try to play a little bit more with my code....
> >>
> >> Thank you
> >>
> >> *De :*users-boun...@geoext.org [mailto:users-boun...@geoext.org]
> *De la
> >> part de* Valiquette,Francois [Montreal]
> >> *Envoyé :* 5 février 2013 12:31
> >> *À :* users@geoext.org
> >> *Objet :* [Users] Enabling drag n drop in the Ext.tree.TreePanel
> (enableDD)
> >>
> >> Hello,
> >>
> >> As written in
> >>
> http://www.geoext.org/tutorials/layertree-tutorial.html?highlight=drag,
> >> if I set /enableDD / to true of my TreePanel, it will enable
> layers
> >> reordering. Does it mean that the user can reorder layers in the
> >> TreePanel or does it mean that the user can reorder the display
> order in
> >> the the MapPanel to make a specific layer appear on top of another
> one?
> >>
> >> I tried to enableDD but when I drag and drop, the layer drawing
> order
> >> does not change. So I just want to if I missed something J
> >>
> >> Thank you
> >>
> >>
> >>
> >> _______________________________________________
> >> Users mailing list
> >> Users@geoext.org
> >> http://www.geoext.org/cgi-bin/mailman/listinfo/users
> >>
>
> --
> _______________________________________________
Users mailing list
Users@geoext.org
http://www.geoext.org/cgi-bin/mailman/listinfo/users
