dojox.layout.ExpandoPane¶
| Status: | Draft |
|---|---|
| Version: | 1.0 |
| Authors: | ?– |
| Project owner: | ?– |
| Available: | since V? |
dojox.layout.ExpandoPane is a self-collapsing widget for use in a BorderContainer.
Introduction¶
This is an experimental widget which provides Expando-like capabilities to a region in a Dijit BorderContainer. The use is able to single-click an icon to open or close the region.
Usage¶
The ExpandoPane is used in a similar way to the way a dijit ContentPane is used, but it provides a user interface to “collapse” and “expand” the Pane.
You should ensure that you include the ExpandoPane CSS in your application in order to have the pane render properly:
1 2 3 | <style type="text/css">
@import url("dojox/layout/resources/ExpandoPane.css");
</style>
|
Examples¶
Programmatic example¶
TODO: example
Declarative example¶
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.layout.ExpandoPane");
</script>
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">
<div dojoType="dojox.layout.ExpandoPane" title="Left Expando" maxWidth="225" splitter="true" region="leading" style="width: 225px;">
Hi. I'm the Expando Pane
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">Hi, I'm center</div>
</div>
<style type="text/css">
@import url("{{ baseUrl }}dojox/layout/resources/ExpandoPane.css");
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#borderContainer {
width: 100%;
height: 100%;
}
</style>