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:[email protected]]
Envoyé : 19 février 2013 06:26
À : Valiquette,Francois [Montreal]
Cc : Julien-Samuel Lacroix; [email protected]
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'; [email protected]
> 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 : [email protected] [mailto:[email protected]] De la part de
> Julien-Samuel Lacroix
> Envoyé : 5 février 2013 14:36
> À : [email protected]
> 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 :*[email protected] [mailto:[email protected]] *De la
>> part de* Valiquette,Francois [Montreal]
>> *Envoyé :* 5 février 2013 12:31
>> *À :* [email protected]
>> *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
>> [email protected]
>> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>>
--
_______________________________________________
Users mailing list
[email protected]
http://www.geoext.org/cgi-bin/mailman/listinfo/users
