Дерево слоев GeoExt2 (слои карты не видны в дереве)

Question

Я точно следил за GeoExt2 LayerTree Example. Мое приложение немного сложнее, чем пример, но конкретный элемент map/tree почти идентичен.

Положения на карту/дерево панели (Ext.Panel) выглядит следующим образом:

Viewport 
\--Ext.tab.Panel (MapTabs) 
    \--Ext.Panel (ArcticTab) <- Map and Tree for "Arctic" location 
     \--GeoExt.panel.Map 
     \--GeoExt.tree.Panel 
    \--Ext.Panel (AntarcticTab) <- Map and Tree for "Antarctic" location 
     \--GeoExt.panel.Map 
     \--GeoExt.tree.Panel 

отрывает в разных местах (Arctic & антарктических) на отдельные вкладки, каждое с картой и деревом.

Вот код видового экрана:

Ext.define('OPS.view.Viewport', { 
    extend: 'Ext.container.Viewport', 

    layout: 'border', 
    defaults: { 
     collapsible: false, 
     split: true, 
     bodyStyle: 'padding:15px' 
    }, 

    requires: [ 
     'OPS.view.Menus.Menus', 
     'OPS.view.HeaderBar.HeaderBar', 
     'OPS.view.FooterBar.FooterBar', 
     'OPS.view.MapTabs.MapTabs', 
     'OPS.Global', 
    ], 

    initComponent: function() { 

     this.items = [ 
      // HEADER 
      { 
       xtype: 'headerbar', 
       region: 'north', 
       margins: '5 5 5 5', 
       height: 0, 
       maxSize: 0, 
       collapsed: true, 
       hideCollapseTool: true, 
      },  
      // MENU 
      { 
       xtype: 'menus', 
       region: 'west', 
       margins: '0 5 0 5', 
       collapsible: true, 
       bodyStyle: 'padding:0px', 
       width: 300, 
       minWidth: 300, 
       maxWidth: 300, 
      }, 
      // MAP 
      { 
       xtype: 'maptabs', 
       region: 'center', 
       margins: '0 5 0 0', 
       bodyStyle: 'padding:0px', 
       collapsible: false, 
       header: false, 
      }, 
      // FOOTER 
      { 
       xtype: 'footerbar', 
       region: 'south', 
       margins: '5 5 5 5', 
       height: 0, 
       maxSize: 0, 
       collapsed: true, 
       hideCollapseTool: true, 
      },    
     ] 

     this.callParent(); 
    } 
}); 

Из окна просмотра я ссылаться на "maptabs" вид. Вот этот код:

Ext.define('OPS.view.MapTabs.MapTabs' ,{ 

    extend: 'Ext.tab.Panel', 
    alias: 'widget.maptabs', 

    requires: [ 
     'OPS.view.MapTabs.ArcticTab.ArcticTab', 
     'OPS.view.MapTabs.AntarcticTab.AntarcticTab' 
    ], 

    initComponent: function() { 

     this.items = [ 
      { 
       xtype: 'arctictab', 
       collapsible: false, 
       header: false, 
      }, 
      { 
       xtype: 'antarctictab', 
       collapsible: false, 
       header: false, 
      } 
     ] 

     this.callParent(arguments); 
    } 
}); 

В maptabs вы можете увидеть каждый вид вкладок (arctictab и antarctictab). Вот код для arctictab:

// OPENLAYERS WMS URL 
var arcticWms = OPS.Global.baseUrl.concat('/geoserver/arctic/wms'); 

// GEOEXT MAP PANEL CONFIGURATION 
var arcticMapPanel = Ext.create('GeoExt.panel.Map', { 
    //border: true, 
    region: 'center', 
    map: { 
     allOverlays: false, 
     projection: 'EPSG:3413', 
     units: 'm', 
     maxExtent: new OpenLayers.Bounds(-8125549,-6101879,8186727,3197247), 
     controls: [ 
      //new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}}), 
      new OpenLayers.Control.Zoom(), 
      //new OpenLayers.Control.MousePosition({prefix: '<a target="_blank" ' +'href="http://spatialreference.org/ref/epsg/3413/">' +'EPSG:3413</a>: '}), 
      //new OpenLayers.Control.ScaleLine(), 
      //new OpenLayers.Control.LayerSwitcher({'ascending':false}),   
     ] 
    }, 
    center: [110200, -1900000], 
    zoom: 4, 
    layers: [ 

     // BASE LAYERS 
     new OpenLayers.Layer.WMS(
      "Natural Earth I", 
      arcticWms, 
      {layers: 'arctic:arctic_naturalearth'}, 
      {isBaseLayer:true} 
     ), 

     new OpenLayers.Layer.WMS(
      "Greenland Coastline", 
      arcticWms, 
      {layers: 'arctic:greenland_coastline',transparent:true}, 
      {isBaseLayer:true,visibility:false} 
     ), 

     // OVERLAYS 
     new OpenLayers.Layer.WMS(
      "Radar Depth Sounder Flightlines", 
      arcticWms, 
      {layers: 'arctic:arctic_rds_line_paths',transparent:true}, 
      {isBaseLayer:false,visibility:true} 
     ), 

    ] 
}); 

// CREATE A TREESTORE FOR ALL LAYERS 
var arcticStore = Ext.create('Ext.data.TreeStore', { 
    model: 'GeoExt.data.LayerTreeModel', 
    root: { 
     expanded: true, 
     children: [ 
      { 
       plugins: [{ 
        ptype: 'gx_layercontainer', 
        loader: {store: arcticMapPanel.layers} // LAYERS FROM ABOVE arcticMapPanel 
       }], 
       expanded: true, 
       text: 'Layers' 
      } 
     ] 
    } 
}); 

// CREATE A TREEPANEL FOR arcticStore 
var arcticTree = Ext.create('GeoExt.tree.Panel', { 
    //border: true, 
    region: 'east', 
    title: 'Map Layer Selection', 
    width: 200, 
    collapsible: true, 
    autoScroll: true, 
    store: arcticStore, 
    rootVisible: true, 
    lines: true, 
}); 

// DEFINE THE ArcticTab PANEL (INCLUDE MAP AND TREE) 
Ext.define('OPS.view.MapTabs.ArcticTab.ArcticTab' ,{ 

    extend: 'Ext.Panel', 

    layout: 'border', 
    defaults: { 
     collapsible: false, 
     bodyStyle: 'padding:0px' 
    }, 

    alias: 'widget.arctictab', 
    title: 'Arctic', 

    deferredRender: false, 
    items: [arcticMapPanel,arcticTree] // GEOEXT MAP PANEL AND 
}); 

Как вы можете видеть, формат в точности соответствует состоянию документации. Ниже приведен образ, показывающий результат, который я получаю.

Answer 1

Для дальнейшего использования:

Добавлено:

Ext.require([ 
    'GeoExt.tree.LayerContainer', 
    'GeoExt.tree.OverlayLayerContainer', 
    'GeoExt.tree.BaseLayerContainer', 
    'GeoExt.data.LayerTreeModel', 
]); 

перед определением Ext.Application в app.js, а также окончательный TreeStore выглядит следующим образом:

// CREATE A TREESTORE FOR ALL LAYERS 
var arcticStore = Ext.create('Ext.data.TreeStore', { 
    model: 'GeoExt.data.LayerTreeModel', 
    root: { 
     expanded: true, 
     children: [ 
      { 
       plugins: [{ 
        ptype: 'gx_overlaylayercontainer', 
        loader: {store: arcticMapPanel.layers} // OVERLAY "DATA" LAYERS FROM arcticMapPanel 
       }], 
       expanded: true, 
       text: 'Data Layers' 
      }, 
      { 
       plugins: [{ 
        ptype: 'gx_baselayercontainer', 
        loader: {store: arcticMapPanel.layers} // BASE "REFERENCE" LAYERS FROM arcticMapPanel 
       }], 
       expanded: true, 
       text: 'Reference Layers' 
      }, 
     ] 
    } 
});