AndyMan

ExtJS  Layout problems  Legend?

Discussion created by AndyMan on Jul 13, 2012
Latest reply on Jul 16, 2012 by AndyMan
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
              }
            }, {

Outcomes