<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"><meta name=Generator content="Microsoft Word 14 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri","sans-serif";}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-US link=blue vlink=purple><div class=WordSection1><p class=MsoNormal>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:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Ext.application({<o:p></o:p></p><p class=MsoNormal> name: 'Custom Map',<o:p></o:p></p><p class=MsoNormal> launch: function() {<o:p></o:p></p><p class=MsoNormal>//.<o:p></o:p></p><p class=MsoNormal>//.<o:p></o:p></p><p class=MsoNormal>//. a bunch of code up here including the MapPanel!!<o:p></o:p></p><p class=MsoNormal>//.<o:p></o:p></p><p class=MsoNormal>//.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> var store = Ext.create('Ext.data.TreeStore', {<o:p></o:p></p><p class=MsoNormal> model: 'GeoExt.data.LayerTreeModel',<o:p></o:p></p><p class=MsoNormal> root: {<o:p></o:p></p><p class=MsoNormal> plugins: [{<o:p></o:p></p><p class=MsoNormal> ptype: "gx_layercontainer",<o:p></o:p></p><p class=MsoNormal> loader: {<o:p></o:p></p><p class=MsoNormal> createNode: function(attr) {<o:p></o:p></p><p class=MsoNormal> // add a WMS legend to each node created<o:p></o:p></p><p class=MsoNormal> attr.component = {<o:p></o:p></p><p class=MsoNormal> xtype: "gx_wmslegend",<o:p></o:p></p><p class=MsoNormal> layerRecord: mapPanel.layers.getByLayer(attr.layer),<o:p></o:p></p><p class=MsoNormal> showTitle: false,<o:p></o:p></p><p class=MsoNormal> // custom class for css positioning<o:p></o:p></p><p class=MsoNormal> // see tree-legend.html<o:p></o:p></p><p class=MsoNormal> cls: "legend"<o:p></o:p></p><p class=MsoNormal> };<o:p></o:p></p><p class=MsoNormal> return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal> }]<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal> });<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> var tabPanel = Ext.create('Ext.tab.Panel', {<o:p></o:p></p><p class=MsoNormal> region: "west",<o:p></o:p></p><p class=MsoNormal> title: "TOC",<o:p></o:p></p><p class=MsoNormal> collapsible: true,<o:p></o:p></p><p class=MsoNormal> collapseMode: "mini",<o:p></o:p></p><p class=MsoNormal> split: true,<o:p></o:p></p><p class=MsoNormal> tabPosition: "bottom",<o:p></o:p></p><p class=MsoNormal> plain: true,<o:p></o:p></p><p class=MsoNormal> border: true,<o:p></o:p></p><p class=MsoNormal> items: [{<o:p></o:p></p><p class=MsoNormal> xtype: "treepanel", //<span style='font-family:Wingdings'>ß</span>I have tried gx_treepanel here, but to no avail (get errors)<o:p></o:p></p><p class=MsoNormal> store: store,<o:p></o:p></p><p class=MsoNormal> title: "Layers",<o:p></o:p></p><p class=MsoNormal> width: 250,<o:p></o:p></p><p class=MsoNormal> autoScroll: true,<o:p></o:p></p><p class=MsoNormal> rootVisible: false,<o:p></o:p></p><p class=MsoNormal> bodyPadding: "10, 0",<o:p></o:p></p><p class=MsoNormal> lines: false,<o:p></o:p></p><p class=MsoNormal> viewConfig: {<o:p></o:p></p><p class=MsoNormal> plugins: [{<o:p></o:p></p><p class=MsoNormal> ptype: 'treeviewdragdrop',<o:p></o:p></p><p class=MsoNormal> appendOnly: false<o:p></o:p></p><p class=MsoNormal> }]<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal> }, {<o:p></o:p></p><p class=MsoNormal> title: "Legend",<o:p></o:p></p><p class=MsoNormal> bodyPadding: 10,<o:p></o:p></p><p class=MsoNormal> width: 250,<o:p></o:p></p><p class=MsoNormal> html: "This is where the Legend goes<br>" + //This is temp placeholder code for now<o:p></o:p></p><p class=MsoNormal> "This is where the Legend goes<br>" +<o:p></o:p></p><p class=MsoNormal> "This is where the Legend goes<br>" +<o:p></o:p></p><p class=MsoNormal> "This is where the Legend goes<br>" +<o:p></o:p></p><p class=MsoNormal> "This is where the Legend goes<br>"<o:p></o:p></p><p class=MsoNormal> }]<o:p></o:p></p><p class=MsoNormal> <o:p></o:p></p><p class=MsoNormal> });<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> Ext.create('Ext.Viewport', {<o:p></o:p></p><p class=MsoNormal> layout: "fit",<o:p></o:p></p><p class=MsoNormal> hideBorders: true,<o:p></o:p></p><p class=MsoNormal> items: {<o:p></o:p></p><p class=MsoNormal> layout: "border",<o:p></o:p></p><p class=MsoNormal> //Don't know if I really need deferredRender<o:p></o:p></p><p class=MsoNormal> deferredRender: false,<o:p></o:p></p><p class=MsoNormal> items: [<o:p></o:p></p><p class=MsoNormal> mapPanel, tabPanel //, toolbar<o:p></o:p></p><p class=MsoNormal> ]<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal> });<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal>});<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>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.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Any advice would be appreciated!<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Thanks,<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Michael Bishopp<o:p></o:p></p><p class=MsoNormal><i>ICT - GIS Software Engineer<o:p></o:p></i></p><p class=MsoNormal><span style='font-size:10.0pt'>Port of Seattle</span><o:p></o:p></p></div></body></html>