title: dojox.layout.ContentPane
body: <p>The followig code is inside a tag script in the head of a JSP.
  I wanted to emulate this behaviour <a href="http://dante.dojotoolkit.org/static/xd/stack-accordion.html" rel="nofollow noreferrer">http://dante.dojotoolkit.org/static/xd/stack-accordion.html</a>. The main differences from that sample are:</p>
  
  <p>1) I use e Tree to navigate contents in the StackContainer;</p>
  
  <p>2) Content are handled by dojoX.Layout.ContenPane beacuse I want to load some JSP I wrote previously.</p>
  
  <pre><code>dojo.addOnLoad(function(){
  
  var store = new dojo.data.ItemFileReadStore({
      data:{
          identifier: 'id',
          label: 'name',
          items: [
              { id: '01', name:'Metadata', type:'Area',
                  children:[
                          {_reference:'001'},
                          {_reference:'002'}
                          ]
              },
              { id: '001', name:'Insert', type:'action', content:'content1' },
              { id: '002', name:'Delete', type:'action', content:'content2' },
          { id: '02', name:'Class', type:'Area',
                  children:[
                          {_reference:'003'}
                          ]
              },
          { id: '003', name:'Create', type:'action', content:'content3'}
              ]
          }
  });
  
  var treeModel = new dijit.tree.ForestStoreModel({
      store: store,
      query: {"type": "Area"},
      rootId: "root",
      childrenAttrs: ["children"],
      openOnClick: true
  });
  
  var ciccio = new dijit.Tree({
      model: treeModel,
      showRoot: false
  }, "treeOne");
  
  // make the main container:
  var bc = new dijit.layout.BorderContainer({
      style:"width:1152px; height:600px"
  }, "main");
  
  // add the two regions:
  var accordion = new dijit.layout.AccordionContainer({
      region:"left",
      id:"mainAccordion",
      style:"width:150px"
  }, "accordion").placeAt(bc);
  
  var stack = new dijit.layout.StackContainer({
      region:"center"
  }, "stack").placeAt(bc);
  
  var accordion1 = new dijit.layout.AccordionPane({
      title: "ciao",
      content: ciccio
  }).placeAt(accordion);
  
  [...]
  
  var content3 = new dojox.layout.ContentPane({
      id: "content3",
      adjustPaths:true,
      renderStyles:true,
      executeScripts:true,
      href:"./content3.jsp"
  }).placeAt(stack);
  
  dojo.connect(ciccio, "onClick", function(item){
      if(store.getValue(item, "type")!= 'Area')
      {
          var boh = store.getValue(item, "content");
          var prova = dijit.byId(boh);
          stack.selectChild(prova);
      }
      else{
          alert(store.getLabel(item));
      }
  });
  
      bc.startup(); /*end dojo.AddOnLoad*/)};
  </code></pre>
  
  <p>Ande here is the full code of the imported JSP (content3.jsp)</p>
  
  <pre><code>&lt;script type="text/javascript" src="./js/filebox/content3.js"&gt;&lt;/script&gt;
  &lt;div dojoType="dijit.layout.BorderContainer" id="container3"
      style="width:auto; height:750px; border: 1px solid #9f9f9f;"&gt;
  
  &lt;div dojoType="dijit.layout.ContentPane" region="top"&gt;
      &lt;h2&gt;Ciao!&lt;/h2&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="filterBox"&gt; Filter: &lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div dojoType="dijit.form.TextBox"
                      jsId="filterBox"
                      id="filterBox"/&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div dojoType="dijit.layout.ContentPane" region="center"&gt;
      &lt;table dojoType="dojox.grid.DataGrid"
              structure= "content3GridLayout"
              columnReordering="true"
              noDataMessage="No metadata retrieved"
              errorMessage="Invalid data retrieved format"
              jsId="content3Grid"
              id="content3Grid"
              style="width:auto; height:99%;"&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see at the top of this JSP I import a file JS
  Here is it:</p>
  
  <pre><code>var content3GridLayout =
      [
         {name : "ID", field : "idMetadataClass", width : "10%"},
         {name : "Name", field : "className", width : "30%"},
         {name : "Description", field : "description", width : "60%"}        
      ];
  
  dojo.xhrPost({
  url : "./jsonListGenerator",
  content: {action:"classList"},
  handleAs : "json",
  load : function(responseObject) {
      var content3GridStore = new dojo.data.ItemFileReadStore({data:responseObject});
      content3Grid.setStore(content3GridStore);
  
      return responseObject;
  },
  error : function(responseObject) {
      dojoAlert("Filebox admin","Internal server error");
      return responseObject;
  }
  });
  
  var lastSearchValue = "";
  dojo.connect(dijit.byId(filterBox), "onKeyUp", function(el) {
  if (el.explicitOriginalTarget.value!=lastSearchValue) {
      lastSearchValue = el.explicitOriginalTarget.value;
      var my_filter = "strToFilter = {className: \"*"+ lastSearchValue + "*\" }";
      eval(my_filter);
      content3Grid.setQuery(strToFilter,{ignoreCase:true});
  }
  });
  </code></pre>
  
  <p>Everythings works perfectly except DOJO.CONNECT
  Infact firebugs warns that filterBox is undefined when dojo.connect tries to connet to de TextBox declared Markup way.</p>
  
  <p>This problem doesn't show if:</p>
  
  <p>1) the TextBox is declared programmaticaly in the JS file</p>
  
  <pre><code>var filterBox = new dijit.form.Textbox({...});
  </code></pre>
  
  <p>2) the javascript code belonging to the filterBox is placed next the dojotype tag</p>
  
  <pre><code>&lt;div dojoType="dijit.form.TextBox"
                      jsId="filterBox"
                      id="filterBox"/&gt;
                      &lt;script type="dojo/method" event="onKeyUp"&gt;
                      if (el.explicitOriginalTarget.value!=lastSearchValue) {
                          lastSearchValue = el.explicitOriginalTarget.value;
                          var my_filter = "strToFilter = {className: \"*"+ lastSearchValue + "*\" }";
                          eval(my_filter);
                          content3Grid.setQuery(strToFilter,{ignoreCase:true});
                      }
                      &lt;/script&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Do you know the reason why it happens?
  Is it a problem of scope?</p>
  
  <p>Thank you in advance!</p>
  
  <p>Teresa</p>