v0.9, How to create ContentPanes in a TabContainer in programmatic way?

Submitted by mannes on Fri, 05/25/2007 - 10:19.

Dijit Support

Hello, how can I do the following in a programmatic way?

<html>

<div dojoType="dijit.layout.LayoutContainer" id="mainLayoutContainer" layoutChildPriority='none' style="width: 100%; height: 100%;">

  <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" doLayout="false" selectedChild="tab1" style="width: 100%; height: 100%;">

    <div id="tab1" dojoType="dijit.layout.ContentPane" label="Tab 1" style="width: 100%; height: 100%;">

      <div id="cp1" dojoType="dijit.layout.ContentPane" style="border: 2px solid red;">content contentpane 1</div>

      <div id="cp2" dojoType="dijit.layout.ContentPane" style="border: 2px solid red;">content contentpane 2</div>

      <div id="cp3" dojoType="dijit.layout.ContentPane" style="border: 2px solid red;">content contentpane 3</div>

    </div>

                <div id="tab2" dojoType="dijit.layout.ContentPane" label="Tab 2" style="width: 100%; height: 100%;">content tab 2</div>

                <div id="tab3" dojoType="dijit.layout.ContentPane" label="Tab 3" style="width: 100%; height: 100%;">content tab 3</div>

  </div>

</div>

</html>

First I comment out the lines with the ContentPanes (cp1, cp2, cp3). Then I try the following:

var cp1 = new dijit.layout.ContentPane( {id:"cp1"}, "tab1" );

  var cp2 = new dijit.layout.ContentPane( {id:"cp2"}, "tab1" );

  var cp3 = new dijit.layout.ContentPane( {id:"cp3"}, "tab1" );

  cp1.setContent("content contentpane 1");

  cp2.setContent("content contentpane 2");

  cp3.setContent("content contentpane 3");

After that I could only see "content contentpane 3" in "tab1". Then I try the following

var cp1 = new dijit.layout.ContentPane( {id:"cp1"} );

but I get an error. FireBug in Firefox shows "node has no properties". But I can do the following:

var tmpForm1 = new dijit.form.Button({});

  var tmpForm2 = new dijit.form.ComboButton({});

  var tmpForm3 = new dijit.form.DropDownButton({});

  var tmpLayout1 = new dijit.layout.LayoutContainer({});

  var tmpLayout2 = new dijit.layout.PageButton({});

  var tmpLayout3 = new dijit.layout.PageContainer({});

  var tmpLayout4 = new dijit.layout.PageController({});

  var tmpLayout5 = new dijit.layout.TabButton({});

  var tmpLayout6 = new dijit.layout.TabContainer({});

  var tmpLayout7 = new dijit.layout.TabController({});

Only the ContentPane is not working. What can I do? Best regards, Bernhard

Login or register to post comments
Subscribe post

This is an old topic, but I

Submitted by Sathallrin on Thu, 08/23/2007 - 17:45.

This is an old topic, but I was having this same problem.

I found that I had to create them this way:

This is the correct way, I

Submitted by ktiedt on Thu, 08/23/2007 - 17:52.

This is the correct way, I cant believe this wasn't answered sooner...

-Karl

just to show a corrected example

Submitted by ktiedt on Thu, 08/23/2007 - 17:56.

var cp1 = new dijit.layout.ContentPane( {id:"cp1"}, dojo.byId("div1") ); //create contentPanes using pre-existing divs

  var cp2 = new dijit.layout.ContentPane( {id:"cp2"}, dojo.byId("div2") );

  var cp3 = new dijit.layout.ContentPane( {id:"cp3"}, dojo.byId("div3") );

  cp1.setContent("content contentpane 1");

  cp2.setContent("content contentpane 2");

  cp3.setContent("content contentpane 3");

  var tabs = new dijit.layout.TabContainer( {id:"tabs"}, dojo.byId('tabDiv') ); //create TabContainer using pre-existing div

  tabs.addChild(cp1); //add contentPanes to TabContainer as children

  tabs.addChild(cp2);

  tabs.addChild(cp3);

-Karl

Search