Login Register

ExpandoPane shows content when collapsed

Hi,

Is it appropriate for an expando pane to show partial content when it is collapsed? For instance - the test_Expando_more.html, demonstrates that a closed left expando, shows a plus sign and a gray bar. It does not show the TabContainer which is on the left side. However, if an expando is created programmatically, it will show some of the TabContainer when it is collapsed.

Why the difference?

Thanks,

John

not sure about that,

not sure about that, actually. there (in theory) should be no difference between markup and programatic creation. are you calling .startup() on the Pane after creation? does your TabContainer have the attachParent="" option enabled? (it's kind of hack to relay resize to layout widgets)

code

Dante,

Here's the code:

var parent = document.getElementById ("container0");
var bc = new dijit.layout.BorderContainer ( {
    style : "width:500px; height:450px; border:2px solid black",
    id : "0"
} );
bc.startup();
dojo.byId (parent.id).appendChild (bc.domNode);

var div = document.createElement ("div");
dijit.byId (bc).domNode.appendChild (div);
var ep = new dojox.layout.ExpandoPane ( {
    title : "ep Test",
    region : "right",
    id : "1",
    style : "width:250px; height:275px;"
}, div);
ep.startup();
bc.addChild (ep);
constructTabContainer(ep, "2");

function constructTabContainer(parent, cid) {
    console.log ("Parent id: " + parent.id);
    var div = document.createElement ("div");
    dijit.byId(parent).domNode.appendChild (div);
    var tabContainer = new dijit.layout.TabContainer ( {
        tabPosition : "bottom",
        attachParent : "true",
        id : cid
    }, div);
    tabContainer.domNode.height = "400px";
    tabContainer.domNode.width = "275px";

    var cp1 = new dijit.layout.ContentPane ( {
        id : cid + ".1",
        title : "CP1"
    });
    cp1.domNode.style.height="400px";
    cp1.domNode.style.border="2px solid red";
    cp1.setContent("Content for CP1");
    tabContainer.addChild(cp1);

    var cp2 = new dijit.layout.ContentPane ({
        id : cid + ".2",
        title : "CP2"
    });
    cp2.domNode.style.height="400px";
    cp2.setContent("Content for CP2");
    tabContainer.addChild(cp2);

    tabContainer.startup();
}

Not sure what I am missing. Using the above code, the expando, when collapsed, still shows a part of the tab container.

Thanks in advance for any help,

John