Сделать, чтобы базовые слои layer и layer1, были в одном root а layer2 в другом root

@GeoNik · Регистрация: 14.11.2014

Доброго времени суток. Вот код

Код

<html>
<head>

<title> A Basic GeoExt Page </title>
 <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css" />
        <script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
       

	   <script type="text/javascript" src="http://localhost:8080/geoserver/www/GeoExt/script/GeoExt.js"></script>

<script type="text/javascript">
   
   var LayerNodeUI = Ext.extend(
    GeoExt.tree.LayerNodeUI,
    new GeoExt.tree.TreeNodeUIEventMixin()
);



   Ext.onReady(function() {
        		
		var map = new OpenLayers.Map();
		
		var layer = new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        );
		
		
         var layer1 = new OpenLayers.Layer.WMS(
       "OpenStreetMap WMS",
            "http://ows.terrestris.de/osm/service?",
       {layers: 'OSM-WMS'}
    );
	     var layer2 = new OpenLayers.Layer.WMS(
       "ДЦ",
                "http://localhost:8080/geoserver/IGDG_data/wms", {
				layers: 'I_data:churchu',
				transparent:true
				});
		
				
         map.addLayers([layer,layer1,layer2]);
		

        var panel=new GeoExt.MapPanel({
		  center: [24, 50],
          zoom: 7,
	      region: "center",
		  map: map,
          
        });
		
		
var tree = new Ext.tree.TreePanel({
        title: 'Layers',
		width: 250,
		rootVisible: true,
		region: "west",
               
        autoScroll: true,
        enableDD: true,
        
        plugins: [{
            ptype: "gx_treenodecomponent"
        }],
        
		loader: {
            applyLoader: false,
            uiProviders: {
                "custom_ui": LayerNodeUI
            }
        },
        
		root: {
            nodeType: "gx_layercontainer",
            loader: {
                baseAttrs: {
                    uiProvider: "custom_ui"
                },
                
            }
        },
        
        lines: false
    });

			 
		 var viev=new Ext.Viewport({
            layout:'border',
            items: [panel, tree,
			   {
                    xtype: 'panel',
                    title: 'Верхня панель',
                    html: 'Верхня панель',
                    region: 'north',
                    height: 80
					
			    },{
                    xtype: 'panel',
                    title: 'Нижня панель',
                    html: 'Нижня панель',
                    region: 'south',
                    height: 200,
					collapsed: true,
					collapsible: true,
                    titleCollapse: true,
					split: true
					
                },{
                    xtype: 'panel',
                    title: 'Права панель',
                    html: 'Права панель',
                    region: 'east',
                    width: 120
                }] ,
                
         });
		
		
    });
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>

Мне не понятно что делает Ext.extend и вообще ее назначение в программе

Код

var LayerNodeUI = Ext.extend(
    GeoExt.tree.LayerNodeUI,
    new GeoExt.tree.TreeNodeUIEventMixin()
);

Также не понятно, что выполняется в элементе ext.tree.TreePanel в этом куске кода

Код

plugins: [{
            ptype: "gx_treenodecomponent"
        }],
        
		loader: {
            applyLoader: false,
            uiProviders: {
                "custom_ui": LayerNodeUI
            }
        },
        
		root: {
            nodeType: "gx_layercontainer",
            loader: {
                baseAttrs: {
                    uiProvider: "custom_ui"
                },
                
            }
        },

Как сделать чтобы базовые слои layer и layer1, были в одном root а layer2 в другом root?

И еще при отключении слоя layer2 в Ext.tree.TreePanel он исчезает с карты. Если сразу его включить то он появляется на карте только когда подвигать картой или при изменении масштаба. В чем проблема? Подозреваю что все дело в Ext.onReady но не знаю что именно.

Заранее благодарю!
Использую ExtJS+GeoExt+OprnLayers

Donald28 · 18.12.2014, 09:23

Правило: если ты пользуешься ExtJS, то держи открытой документацию по этой библиотеке и этой версии

По поводу Ext.extend смотри тут: http://docs.sencha.com/extjs/3... hod-extend
В твоем случае этот метод расширяет объект GeoExt.tree.LayerNodeUI новым объектом GeoExt.tree.TreeNodeUIEventMixin(). Скорее классы этих объектов описаны у тебя в

HTML5

1	<script type="text/javascript" src="http://localhost:8080/geoserver/www/GeoExt/script/GeoExt.js"></script>

Про кусок кода: TreePanel у тебя дополняется плагином (plugins), который описан скорее всего в том же файле. Про этот плагин ничего сказать немогу, надо смотреть документацию именно по нему, если такая имеется. root и loader также приведены в документации к ExtJS.

Про остальное (слои), т.к. не знаком с приведенными (GeoExt+OprnLayers) расширениями

Опции темы

Сделать, чтобы базовые слои layer и layer1, были в одном root а layer2 в другом root

Решение