GeoExt2 Layer Tree (map layers not visible in tree)

Question

I've followed the GeoExt2 LayerTree Example almost exactly. My application is a bit more complex than the example, but the specific map/tree element is nearly identical.

The position of the map/tree panel (an Ext.Panel) is as follows:

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

I separate different locations (Arctic & Antarctic) onto separate tabs, each with a map and tree.

Here is the viewport code:

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();
    }
});

From the viewport I reference the "maptabs" view. Here is that code:

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);
    }
});

In maptabs you can see each tab view (arctictab and antarctictab). Here is the code for 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 
});

As you can see the format is exactly like the documentation states. Below is an image showing the result I get.

Answer 1

For future reference:

Added:

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

before the definition of Ext.Application in app.js, also the final treestore looks like this:

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