[Users] Adding gx_treepanel to tab panel?

[Bishopp, Michael]

I am new to GeoExt and am struggling to figure out how to add a GeoExt.tree.panel to a Ext.tab.Panel.  Here is what I have in brief:

Ext.application({
    name: 'Custom Map',
    launch: function() {
//.
//.
//. a bunch of code up here including the MapPanel!!
//.
//.

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'GeoExt.data.LayerTreeModel',
            root: {
                plugins: [{
                    ptype: "gx_layercontainer",
                    loader: {
                        createNode: function(attr) {
                            // add a WMS legend to each node created
                            attr.component = {
                                xtype: "gx_wmslegend",
                                layerRecord: mapPanel.layers.getByLayer(attr.layer),
                                showTitle: false,
                                // custom class for css positioning
                                // see tree-legend.html
                                cls: "legend"
                            };
                            return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
                        }
                    }
                }]
            }
        });

                              var tabPanel = Ext.create('Ext.tab.Panel', {
                                             region: "west",
                                             title: "TOC",
                                             collapsible: true,
                                             collapseMode: "mini",
                                             split: true,
                                             tabPosition: "bottom",
                                             plain: true,
                                             border: true,
                                             items: [{
                                                            xtype: "treepanel", //<--I have tried gx_treepanel here, but to no avail (get errors)
                                                            store: store,
                                                            title: "Layers",
               width: 250,
                                                            autoScroll: true,
               rootVisible: false,
                                                            bodyPadding: "10, 0",
               lines: false,
                                                            viewConfig: {
                                                                           plugins: [{
                                                                                          ptype: 'treeviewdragdrop',
                                                                                          appendOnly: false
                                                                           }]
                                                            }



                                             }, {
                                                            title: "Legend",
                                                            bodyPadding: 10,
                                                            width: 250,
                                                            html: "This is where the Legend goes<br>" +  //This is temp placeholder code for now
                                                            "This is where the Legend goes<br>" +
                                                            "This is where the Legend goes<br>" +
                                                            "This is where the Legend goes<br>" +
                                                            "This is where the Legend goes<br>"
                                             }]

                              });

        Ext.create('Ext.Viewport', {
            layout: "fit",
            hideBorders: true,
            items: {
                layout: "border",
                                                            //Don't know if I really need deferredRender
                                                            deferredRender: false,
                items: [
                    mapPanel, tabPanel //, toolbar
                ]
            }
        });

    }
});

Under the var tabPanel (see above), I have the "items" config that contains an xtype of treepanel right now.  This 'sort of' works, but not as expected.  I have also tried an gx_treepanel here, but this gives all kinds of errors and really doesn't work as expected.

Any advice would be appreciated!

Thanks,

Michael Bishopp
ICT - GIS Software Engineer
Port of Seattle
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20151214/f066e05c/attachment.html