topic ExtJS Layout problems Legend? in ArcGIS JavaScript Maps SDK Questions

ExtJS Layout problems Legend?

AndrewDavis — Sun, 12 Dec 2021 04:47:29 GMT

Hello, I have gotten a copy of the ExtJS Layout to work on my local machine.

I have the map showing/centered and behaving nicely. I am working on putting legend information into the "west" panel and having a bit of frustration.

The example: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/framework_extjslayout.html
I have looked at this for a while and it appears that I should be able to set a property of "contentEl:" to a section of html in the page to "West" or something like that and then get access to placing content inside the "west" panel.

I have tried to set the html property to .. html: "<div id='legend'></div>" or other things with no luck.

Does the panel actually talk/interact with other portions of the page or is there a thing I have missed.

my page is directly lifted from the samples.

Andy..

var viewport = new Ext.Viewport({
          layout: "fit",
          title: "EXT JS Layout",
          items: [{
            layout: "border",
            items: [{
              region: "center",
              title: "center",
              html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'></div>"
            }, {
              region: "north",
              height: 50,
              collapsible: false,
              contentEl:"header" 
            }, {
              region: "south",
              height: 80,
              collapsible: false,
              contentEl: "footer" // this gets the content from the div named "footer"
            }, {
              region: "west",
              title: "Left Panel",
              width: 150,
              split: true,
              collapsible: true,
              html: "Left panel content. This panel is collapsible and can be resized using the splitter",
              listeners:{
                collapse: resizeMap,
                expand: resizeMap
              }
            }, {

Re: ExtJS Layout problems Legend?

KellyHutchins — Sun, 12 Dec 2021 16:47:36 GMT

Andy,

Here's one way you can add a legend to the left panel.
First add a div that will hold the legend to the 'west' region:

            region: "west",
              title: "Left Panel",
              width: 150,
              split: true,
              collapsible: true,
              html: "<div id='legend'></div>",
              listeners:{
                collapse: resizeMap,
                expand: resizeMap
              }

Then when you create the legend specify the id of the div:

          var legendDijit = new esri.dijit.Legend({
              map:map
            },"legend");
          legendDijit.startup();

Re: ExtJS Layout problems Legend?

AndrewDavis — Fri, 13 Jul 2012 21:43:45 GMT

Hey Kelly,

Thanks, I got it working, youre right but theres something else. The line about "spliter being true" needs to be either commented out or removed.

The ExtJS documentation stated that if you have a title on the region then you do not use the splitter.

I found that out after about 2 hrs of searching

Andy

Re: ExtJS Layout problems Legend?

AndrewDavis — Mon, 16 Jul 2012 16:02:29 GMT

Hi there folks,
Sheepishly, I want to revise my remarks.. if you see the "contentEl: 'your<div>Here'" in the above code.. Well, that kind of looked like "contentE1" instead of a lower case L to me.

That was the only problem in my efforts.

Thanks again to Kelly..

Andy

Hey Kelly,

Thanks, I got it working, youre right but theres something else. The line about "spliter being true" needs to be either commented out or removed.

The ExtJS documentation stated that if you have a title on the region then you do not use the splitter.

I found that out after about 2 hrs of searching

Andy