A ContentPane
is the most
basic layout tile and it inherits directly from _Widget
; conceptually, it is like a
super-duper variation of an iframe
except that it fits right into the page with all sorts of bells and
whistles, not the least of which are the ability to render arbitrary
snippets of HTML (not just full documents), reload content via XHR on
demand, render widgets, and respect the page's theme. More often than
not, a ContentPane
is contained
within another widget such as a TabContainer
, although a ContentPane
has several interesting uses
cases on its own.
In its most generic usage, a layout pane does nothing special at all, as shown in Example 14-1.
Example 14-1. Creating a ContentPane in markup
<html> <head><title>Fun with ContentPane!</title> <link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" /> <link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" /> <script djConfig="parseOnLoad:true", type="text/javascript" src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"> </script> <script type="text/javascript"> dojo.require("dijit.layout.ContentPane"); </script> </head> <body class="tundra"> <div dojoType="dijit.layout.ContentPane"> Nothing special going on here. </div> </body> </html>
Tip
When browsing the source code or reading about Dojo online,
you may notice that there is also a LinkPane
dijit. Over the course of time,
ContentPane
evolved to absorb
much of what LinkPane
used to do,
and it is likely that LinkPane
will become deprecated because it offers a trivial amount of
built-in functionality beyond that of ContentPane
.
However, you can trivially fetch arbitrary content from a server
and render it into the page by merely providing a reference to the
server side URL. Suppose that a server-side URL called
foo returns a snippet of text; you could use the
ContentPane
to display it like
so:
<div id="foo" preload="false" dojoType="dijit.layout.ContentPane" href="foo">
In this particular case, the foo URL might
have returned just a simple string value, although it could have
returned a widget that would have been automatically parsed and
rendered into the page. Just note that the widget must already have
been dojo.require
'd into the page.
For example, let's suppose the foo URL returned <div
dojoType="dijit.form.Textarea"></div>
, then by
default, the dijit would be parsed and rendered into the page.
Table 14-3 presents a summary of
everything that a ContentPane
supports.
Table 14-3. ContentPane API
Name | Type | Comment |
---|---|---|
| String | Used to designate the external data the pane should load. |
| Boolean | If |
| Boolean | If |
| Boolean | Acts just like the
|
| Boolean | Used to force the pane
to load content, even if it is not initially visible. (If the
node is styled with |
| Boolean | Used to indicate
whether the pane should reload every time the pane goes from a
hidden state to a visible state. |
| String | Defined in |
| String | Defined in |
| Boolean | Used to provide an explicit status for whether content is loaded. Useful for inquiries involving content that is often refreshed. |
| Function | Used to force the content to refresh by downloading it again. |
| Function | Used to change the
location of the external content for the dijit. If |
| Function | Used to explicitly set local content for the pane. |
| Function | Cancels the in-progress download of content. |
| Function | Extension point that is called after the load (and optional parsing of widgets) takes place. |
| Function | Extension point that is
called before existing content is cleared by a refresh,
|
| Function | Extension point that is called just before the download begins. By default, returns the string that is displayed as the loading message. |
| Function | Extension point that is called when DOM errors occur. The string that is returned is what is displayed to the user. |
| Function | Extension point that is called if an error occurs during the download. By default, returns the string that is displayed as the error message. |
| Function | Extension point that is called when the download completes. |
Given an existing node called foo
, you could programmatically create a
ContentPane
like so:
var contentPane = new dijit.layout.ContentPane({ /* properties*/, "foo"); contentPane.startup( ); //good practice to get in the habit of always calling startup
Because ContentPane
is not a
descendant of _Container
, there are
no built-in methods for adding children to a ContentPane
. However, you can use a ContentPane
's domNode
reference to append another node
inside of it using plain old JavaScript, which works just fine. For
example, using the existing content pane from the previous
example:
contentPane.domNode.appendChild(someOtherDijit.domNode);
Tip
You may be wondering why ContentPane
does not directly support the
interface provided by _Container
.
The unofficial answer is that a ContentPane
, in general, does not need to
perform a specific action when a child is placed into it for a
specific reason. The reasons for adding children to a ContentPane
are wide and varied. If you
really wanted to, however, you could mixin
or extend
_Container
into ContentPane
.
Get Dojo: The Definitive Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.