[Users] TR: Enabling drag n drop in the Ext.tree.TreePanel(enableDD)
Valiquette,Francois [Montreal]
Francois.Valiquette at ec.gc.ca
Tue Feb 19 16:27:25 CET 2013
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.dalesio at r3-gis.com]
Envoyé : 19 février 2013 06:26
À : Valiquette,Francois [Montreal]
Cc : Julien-Samuel Lacroix; users at 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 at 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-bounces at geoext.org [mailto:users-bounces at geoext.org] De la part de Julien-Samuel Lacroix
> Envoyé : 5 février 2013 14:36
> À : users at 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-bounces at geoext.org [mailto:users-bounces at geoext.org] *De la
>> part de* Valiquette,Francois [Montreal]
>> *Envoyé :* 5 février 2013 12:31
>> *À :* users at 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 at geoext.org
>> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>>
--
More information about the Users
mailing list