Login Register

ContentPane

A Content Pane is the most basic layout tile. Conceptually, it's like the content boxes in portals like MyYahoo. A content pane resembles an iframe, but contains extra design features, fits in with the current theme, and renders widgets properly.

You can use content panes by themselves, but usually you will place content panes inside of a layout container. For example, in a tabbed layout, content pane tags surround each tab of information.

Examples

Simple content panes have their content inside the tags Most of the time, these simple panes are used inside layout containers, so the examples in LayoutContainer, StackContainer and TabContainer illustrate their use.

Linked content panes, those with their content in a separate URL, are useful even without containers. To illustrate, we'll use the example data store countries.txt, which you can download below (after this page text, and right above the navigation bars). For the example to work verbatim, just place it in the same directory as these files on your web server. If the following is linked_content_pane.html:

<!-- Note, you don't have to include Dojo scripts, CSS, or other things here ... -->
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
        url="countries.txt">
</div>
<div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
        labelAttr="name" typeAttr="type">
</div>

You can include it within a page like this. Because the tree may take a long time to load, we display a loading message for the user.

This text be replaced with the tree
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Linked Content Pane Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
        <script type="text/javascript">
        dojo.require("dojo.parser");
                dojo.require("dijit.layout.ContentPane");
                dojo.require("dijit.Tree");
                dojo.require("dojo.data.ItemFileReadStore");
     </script>
</head>
<body class="tundra">
        <div preload="true" dojoType="dijit.layout.ContentPane" href="linked_content_pane.html">
                This text be replaced with the tree
        </div>
</body></html>

Note here that the dojo.require for the tree is placed in the calling html. SCRIPT tags of type "text/Javascript" in the included html file are ignored. However SCRIPT tags with type dojo/method and dojo/connect work fine. See Understanding the Parser for details.

Like all Dijit components, you can create a ContentPane dynamically. The following example adds a new ContentPane to an existing Tab Container.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Content Pane Programmatic Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
        <script type="text/javascript">
                dojo.require("dijit.layout.ContentPane");
                dojo.require("dijit.layout.TabContainer");
                dojo.require("dijit.Tree");
                dojo.require("dojo.data.ItemFileReadStore");
               
                dojo.addOnLoad(function() {
                        // create a ContentPane
                        var newChild =
                                new dijit.layout.ContentPane({
                                                href:'linked_content_pane.html',
                                                title:'newChild',
                                                refreshOnShow:true
                                        },
                                        dojo.doc.createElement('div')
                                );
                       
                        // find my tabContainer and add our new ContentPane
                        dijit.byId('myTabContainer').addChild(newChild);
                       
                        // find parent Container and subscribe to selectChild event
                        // without it refreshOnShow and href load wont work.
                        newChild.startup();          
                });
     </script>
</head>
<body class="tundra">
        <div id="myTabContainer" dojoType="dijit.layout.TabContainer"
                 style="width:500px;height:300px">
</div>
</body></html>

NOTE! You must include a sourcenode when creating a ContentPane. You must call .startup() after you have addChild() it to your parent

dijit.layout.ContentPane
A widget that acts as an all-purpose sizable pane without navigation, and includes a ajax interface
Attributes
errorMessage String
Locale dep.
Message that shows if an error occurs
extractContent Boolean
false
Extract visible content from inside of <body> .... </body>
href String The href of the content that displays now. Set this at construction if you want to load data externally when the pane is shown. (Set preload=true to load it immediately.) Changing href after creation does not have any effect; see setHref();
isLoaded Boolean
false
Tells loading status see onLoad|onUnload for event hooks
loadingMessage String
Locale dep.
Message that shows while downloading
parseOnLoad Boolean
true
parse content and create the widgets, if any
preload Boolean
false
Force load of data even if pane is hidden.
preventCache Boolean
false
Cache content retreived externally
refreshOnShow Boolean
false
Refresh (re-download) content when pane goes from hidden to shown
Methods
cancel() Cancels a inflight download of content
refresh() Force a refresh (re-download) of content, be sure to turn off cache we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane
resize(/* String */size Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets)
setContent(/*String|DomNode|Nodelist*/data) Replaces old content with data content, include style classes from old content
setHref(/*String|Uri*/ href) Reset the (external defined) content of this pane and replace with new url Note: It delays the download until widget is shown if preload is false
Extension Points
onContentError(/*Error*/ error) called on DOM faults, require fault etc in content default is to display errormessage inside pane
onDownloadEnd() called when download is finished
onDownloadError(/*Error*/ error) Called when download error occurs, default is to display errormessage inside pane. Overide function to change that. The string returned by this function will be the html that tells the user a error happend
onDownloadStart() called before download starts the string returned by this function will be the html that tells the user we are loading something override with your own function if you want to change text
onLoad(/* Event */e) Event hook, is called after everything is loaded and widgetified
onUnload(/* Event */e) Event hook, is called before old content is cleared

Accessibility - updated for 1.0

General Issues

The developer is responsible for determining if the ContentPane should be in the tab order of the page or not. If the ContentPane is not likely to have a focusable item within the contents, the developer may want to add tabindex=""0" onto the ContentPane element. This will put the ContentPane into the tab order so if someone is using the tab key to navigate through the elements on the page, the ContentPane itself will get focus. Having focus go to the ContentPane itself can be helpful for users of assistive technology to be able to navigate to an area that may not have any focusable elements within it such as a preview pane for mail messages or a page footer containing important information.

AttachmentSize
countries.txt2.42 KB

Linkpane

Maybe I'm out of the scope, but Linkpane is now deprecated?
--
NP

You can still use it.

But I'm reluctant to document it because quite honestly, I don't see the use of it. ContentPane with a title="..." attribute does the same thing.

problems running script blocks

When i have a ContentPane loaded using href with a nested script block in the response this is not executed.
When I use in the root of the response it doesn't anything either.
How can I run script blocks from a response and display some HTML asynchronously using ContentPane?

running scripts

Hello,

try to use:

dojo.require("dijit.layout.ContentPane");
      dojo.require("dojox.layout.ContentPane");

and your html:

I was trying to do the same thing, with dojox it worked cause it permits inline scripts inside the html you want to load.

Now, I have a question too for all. I want a loading gif inside "loading message" property, cause when I just put in div as shown above, there is a long moment that my loading.gif disappears until the image that I loaded asynchronously appears.

thanks for all,

Some doubts about size

Hello, I have the following scheme

LayoutContainer
ContentPane
Table
TextBox
TextBox

I use AJAX to subtitute everything inside ContentPane with other data, then at some point i fall back to the original scheme using ContentPane.setContent. When I do this, the TextBox doesnt adjust to the size i gave them.

The questions are:
First:Why if I have defined a size for the LayoutContainer, the TextBoxes doesnt adjust to it?
Second:Why if I have defined a size for the TextBoxes, the first time it loads it, loads ok, but when I get it with AJAX and use setContent doesnt it adjust to the size I gave it?

many thanks in advance for any comments you can give me

Carlos Zager

Sizing Problem

Hello all. I am having an issue with adding widgets to content panes. When my page first loads I have a title pane inside one of my content panes. When the user clicks on something, I add another title pane to the content pane. My problem is the content pane doesn't resize to fit the new title pane. If i set the size manually whenever the window is resized the content pane returns to its original size. What am I missing?