[Users] Two TreeLoader for the same TreePanel?

gbrun gbrun at myopera.com
Fri Jul 15 16:49:48 CEST 2011


I finally solved my problem, using faked nodes. Quite ugly, but it's  
working!

For those interested, you will find the code below, with more commentaries  
this time:

// Fake node that loads the WMS layers
var wfs_child = new Ext.tree.AsyncTreeNode({
	expanded: true, //allow layers autoload
	text: 'Couches en WMS',	
	hidden: true, //hide the node after layers loading
	loader: wms_loader
});

// Fake node that loads the WFS layers
var wfs_child = new Ext.tree.AsyncTreeNode({
	expanded: true, //allow layers autoload
	text: 'Couches en WFS',	
	hidden: true, //hide the node after layers loading
	loader: wfs_loader
});
	
// TreePanel root node, which will contains the future nodes (keywords  
folders, and layers inside these folders)
var root = new Ext.tree.TreeNode({
         expanded: true, // allow children autoload, and thus layers  
autoload
	text: 'Toutes les couches'
});
	
root.appendChild(wms_child); //add the WMS child
root.appendChild(wfs_child); //add the WFS child
			
//TreePanel which contains all the nodes
var tree_catalog = new Ext.tree.TreePanel({
	title: "Couches Disponibles",
	anchor: '100% 50%',
	collapsible: true,
	collapsed: false,
	titleCollapse: true,
	autoScroll: true,
	split: true,
	lines: false,
	rootVisible: false, //hide the root node, but not its children
	root: root,

I hope this thread is not too confused. Maybe it could be interesting to  
create a right GeoExt object called WFSCapabilitiesLoader, like the  
WMSCapabilities Loader?

My code is specific to my application, but it probably could be adapted  
for a general use?

Geoffrey




On Fri, 15 Jul 2011 13:59:46 +0200, gbrun <gbrun at myopera.com> wrote:

> It took me some time to clean my code, as it was a rough code! ;)
>
> Here is my WMS TreeLoader, inspired by the
> GeoExt.tree.WMSCapabilitiesLoader.js file:
>
> wms_loader = new Ext.tree.TreeLoader({
>              url:
> 'http://192.168.168.199:81/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities&namespace=wms',
>              layerOptions: {buffer: 0, singleTile: true, ratio: 1},
>              layerParams: {'TRANSPARENT': 'TRUE'},
> 	    requestMethod: 'GET',
> 	    getParams: function(node) {
> 		  return {'service': 'WMS', 'request': 'GetCapabilities'};
> 	    },
> 			
> 	    processResponse : function(response, node, callback, scope){
> 			var capabilities = new
> OpenLayers.Format.WMSCapabilities().read(response.responseXML ||
> response.responseText);
> 			this.processWMSlayer(capabilities.capability,
> capabilities.capability.request.getmap.href, node);
> 			if (typeof callback == "function") {
> 				callback.apply(scope || node, [node]);
> 			}
> 	    },
> 			
> 	    createWMSLayer: function(layer, url) {
> 			if (layer.name){
> 				return new OpenLayers.Layer.WMS(layer.title, url,
> 					OpenLayers.Util.extend(
> 						{formats: layer.formats[0],
> 						layers: layer.name},
> 					this.layerParams),
> 					OpenLayers.Util.extend(
> 						{minScale: layer.minScale,
> 						queryable: layer.queryable,
> 						maxScale: layer.maxScale,
> 						metadata: layer},
> 					this.layerOptions)
> 				);
> 			} else {
> 				return null;
> 			}
> 	     },
> 			
> 	     processWMSlayer: function(layer, url, node){
> 	 		   Ext.each(layer.layers, function(layers){
> 			    Ext.each(layers.keywords, function(keywords) {
> 						var k = this.createNode(
> 							{text: keywords.value,
> 							nodeType: 'node',
> 							leaf: false}
> 						);
> 						var test = true;
> 						for (var i = 0, l = root.childNodes.length; i < l; i++){
> 							var currentNode = root.childNodes[i];
> 							if (k.text == currentNode.text){
> 								test = false;
> 							};
> 						};
> 						var n = this.createNode(
> 							{text: layers.title,
> 							// use nodeType 'node' so no AsyncTreeNodes are created
> 							nodeType: 'node',
> 							layer: this.createWMSLayer(layers, url),
> 							leaf:true
> 						});
> 						if(test == true){
> 							root.appendChild(k);
> 							k.appendChild(n);
> 						}else{
> 							currentNode.appendChild(n);
> 						}
> 				}, this);
> 		    }, this);
> 	    },
> 				
>              // customize the createNode method to add a checkbox to  
> nodes
>              createNode: function(attr) {
>                  attr.checked = attr.leaf ? false : undefined;
>                  return
> GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this,  
> [attr]);
>              }
> });
>
>
> Here is my WFS TreeLoader, inspired by the precedent code and the
> GeoExt.data.WMSReader.js file
>
>
> wfs_loader = new Ext.tree.TreeLoader({
>              url:
> 'http://192.168.168.199:81/geoserver/wfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetCapabilities&namespace=wfs',
> 	    requestMethod: 'GET',
> 	    getParams: function(node) {
> 		  return {'service': 'WFS', 'request': 'GetCapabilities'};
> 	    },			
>
> 	    processResponse : function(response, node, callback, scope){
> 			var data = new
> OpenLayers.Format.WFSCapabilities().read(response.responseXML ||
> response.responseText);
> 			this.processWFSlayer(data, node);
> 			if (typeof callback == "function") {
> 				callback.apply(scope || node, [node]);
> 			}
> 	    },
> 			
> 	    createWFSLayer: function(data, featureType) {
> 				var layerOptions, protocolOptions;
> 				protocolOptions = {
> 					url: data.capability.request.getfeature.href.post,
> 					featureType: featureType.name,
> 					featureNS: featureType.featureNS,
> 					outputFormat: "json",
> 					readFormat: new OpenLayers.Format.GeoJSON()
> 				};
> 				layerOptions = {
> 					protocol: new OpenLayers.Protocol.WFS(protocolOptions),
> 					strategies: [new OpenLayers.Strategy.Fixed()]
> 				};
> 				return  new OpenLayers.Layer.Vector(
> 					featureType.title || featureType.name,
> 					layerOptions
> 				);
> 	    },
> 			
> 	    processWFSlayer: function(data, node){
> 				var featureTypes = data.featureTypeList.featureTypes;
> 				var featureType;
>
> 				for(var i=0, lenI=featureTypes.length; i<lenI; i++) {
> 					featureType = featureTypes[i];
> 					Ext.each(featureType.keywords, function(keywords) {
> 						var k = this.createNode({text: keywords,
> 							nodeType: 'node',
> 							leaf: false
> 						});
> 						var test = true;
> 						for (var i = 0, l = root.childNodes.length; i < l; i++){
> 							var currentNode = root.childNodes[i];
> 							if (k.text == currentNode.text){
> 								test = false;
> 							};
> 						};
> 						var n = this.createNode({text: featureType.title,
> 							// use nodeType 'node' so no AsyncTreeNodes are created
> 							nodeType: 'node',
> 							layer: this.createWFSLayer(data, featureType),
> 							leaf:true
> 						});
> 						if(test == true){
> 							root.appendChild(k);
> 							k.appendChild(n);
> 						}else{
> 							currentNode.appendChild(n);
> 						}
> 					}, this);
> 				  }
> 	    }
> 	
>              // customize the createNode method to add a checkbox to  
> nodes
>              ,createNode: function(attr) {
>                  attr.checked = attr.leaf ? false : undefined;
>                  return
> GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this,  
> [attr]);
>              }
> });
>
>
> Here is my TreePanel's RootNode which contains the WMS TreeLoader:
>
> 	var root = new Ext.tree.AsyncTreeNode({
> 			expanded: true,
> 			text: 'Couches en WFS',
> 			loader: wms_loader
> 	});
>
> Here is an AsyncNode which contains the WFS TreeLoader. At this moment,  
> it
> is not implemented in my current code:
>
> 	var root2 = new Ext.tree.AsyncTreeNode({
> 		        expanded: true,
> 			text: 'Couches en WMS',
> 			loader: wfs_loader
> 	});
>
> Here is my general TreePanel:
>
> 	var tree_catalog = new Ext.tree.TreePanel({
> 		title: "Couches Disponibles",
> 		anchor: '100% 50%',
> 		collapsible: true,
> 		collapsed: false,
> 		titleCollapse: true,
> 		autoScroll: true,
> 		split: true,
> 		//enableDD: true,
> 		lines: false,
> 		rootVisible: true,
> 		root: root,
> 		listeners: {
>              // Add layers to the map when ckecked, remove when  
> unchecked.
>              // Note that this does not take care of maintaining the  
> layer
>              // order on the map.
>              'checkchange': function(node, checked) {
>                  if (checked === true) {
>                      mapPanel.map.addLayer(node.attributes.layer);
>                  } else {
>                      mapPanel.map.removeLayer(node.attributes.layer);
>                  }
>              }
>          };
>
>
> So, at this moment, there are few commentaries. If you need some
> precisions, please ask me. What I think to do now: I will create a quite
> normal root node in my TreePanel, but nothing will be loaded trough this
> one. Then, I will create children, which will load new nodes on the root
> node (and not on themselves). These children will be "phantom" nodes:  
> they
> will be empty. It's not fine to do like this, but I'm looking for
> something that works! ;)
>
> Best regards,
>
> Geoffrey
>
>
>
> On Fri, 15 Jul 2011 12:47:43 +0200, Robert Buckley
> <robertdbuckley at yahoo.com> wrote:
>
>> Could you send some code please,
>>
>> cheers,
>>
>> Robert
>>
>>
>>
>>
>>
>> ________________________________
>> Von: gbrun <gbrun at myopera.com>
>> An: users at geoext.org
>> Gesendet: Freitag, den 15. Juli 2011, 11:04:53 Uhr
>> Betreff: [Users] Two TreeLoader for the same TreePanel?
>>
>> Hi!
>>
>> I'm a little bit confused. I want to mix WMS and WFS layers in the same
>> TreePanel. To request these layers, I personalized a kind of
>> WMSCapabilitiesLoader in my web application and created a similar
>> function
>> to load WFS layers in a three. But now, my problem is to load these both
>> TreeLoader in the same TreePanel. In fact, it's possible to load them in
>> two separate AsyncNodes, but it's not what I want to do: I want an only
>> root node, which contains multiple nodes loaded by my both WMS and WFS
>> loaders. So I need to specify two loaders in my TreePanel, or two  
>> loaders
>> in the root AsyncNode from my TreePanel, or combine my two TreeLoader in
>> only one TreeLoader! But none of these solutions are working...
>>
>> Does anyone has an idea?
>>
>> Geoffrey
>> _______________________________________________
>> Users mailing list
>> Users at geoext.org
>> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
>


-- 
Using Opera's revolutionary email client: http://www.opera.com/mail/


More information about the Users mailing list