Tree GeoExt2图层树（地图图层在树中不可见）

我几乎完全遵循了GeoExt2。我的应用程序比示例要复杂一些，但具体的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

从视口中，我引用“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 
});

//OPENLAYERS WMS URL
var arcticWms=OPS.Global.baseUrl.concat（'/geoserver/arctic/wms'）；
//GEOEXT地图面板配置
var arcticMapPanel=Ext.create（'GeoExt.panel.Map'{
//边界：是的，
地区：'中心'，
地图：{
allOverlays:错，
投影：‘EPSG:3413’，
单位：'m'，
maxExtent:new OpenLayers.Bounds（-8125549，-610187981867273197247），
控制：[
//新的OpenLayers.Control.Navigation（{dragPanOptions:{enableKinetic:true}}），
新建OpenLayers.Control.Zoom（），
//新建OpenLayers.Control.MousePosition（{prefix:':':'}），
//新建OpenLayers.Control.ScaleLine（），
//新的OpenLayers.Control.LayerSwitcher（{'ascending'：false}），
]
},
中心：[110200，-1900000]，
缩放：4，
图层：[
//基层
新OpenLayers.Layer.WMS(
“自然地球一号”，
arcticWms，
{图层：'北极：北极自然'}，
{isBaseLayer:true}
),
新OpenLayers.Layer.WMS(
“格陵兰海岸线”，
arcticWms，
{图层：'北极：格陵兰岛海岸线'，透明：真实}，
{isBaseLayer:true，可见性：false}
),
//覆盖层
新OpenLayers.Layer.WMS(
“雷达测深仪飞行路线”，
arcticWms，
{图层：'北极：北极路径'，透明：真}，
{isBaseLayer:false，可见性：true}
),
]
});
//为所有层创建树顶
var arcticStore=Ext.create（'Ext.data.TreeStore'{
模型：“GeoExt.data.LayerTreeModel”，
根目录：{
对,，
儿童：[
{
插件：[{
p类型：“gx_layercontainer”，
加载程序：{store:arcticMapPanel.layers}//arcticMapPanel上方的层
}],
对,，
文本：“层”
}
]
}
});
//为arcticStore创建树面板
var arcticTree=Ext.create（'GeoExt.tree.Panel'{
//边界：是的，
地区：'东'，
标题：“地图图层选择”，
宽度：200，
可折叠的：是的，
autoScroll：是的，
商店：arcticStore，
对,，
台词：对，
});
//定义ArcticTab面板（包括地图和树）
Ext.define（'OPS.view.MapTabs.ArcticTab.ArcticTab'{
扩展：“Ext.Panel”，
布局：“边框”，
默认值：{
可折叠：错误，
车身样式：“填充：0px”
},
别名：“widget.arctictab”，
标题：“北极”，
延迟呈现：false，
items:[arcticMapPanel，arcticTree]//地理外部地图面板和
});

正如您所见，格式与文档状态完全相同。下面的图片显示了我得到的结果

供将来参考：

增加：

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

在app.js中定义Ext.Application之前，最终的树顶也是这样：

// 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'
            },
        ]
    }
});

// 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'
            },
        ]
    }
});