ContentPane, LinkPane
ContentPane → dijit.layout.ContentPane
dojo.require("dijit.layout.ContentPane");
The ContentPane in Dijit is a stripped version of the 0.4.
There is a Dojox ContentPane with more the more advanced features.
| 0.4 | 0.9 | Comments |
|---|---|---|
| label | title | For ContentPanes (or other widgets) that are children of TabContainer or StackContainer (nee PageContainer), use "title" to specify the title rather than "label" |
| cacheContent | preventCache | |
| parseContent | parseOnLoad | Create widgets within content |
| adjustPaths | deleted | Fix relative paths within content |
| handler | deleted | |
| executeScripts | deleted | But <script type="dojo/method">...</script> available in dojo.parser are supported |
| scriptScope | deleted | |
| scriptSeparation | deleted | |
| bindArgs | deleted | |
| href | same | For the uncommon case when you have a ContentPane with an href that's *not* inside a TabContainer etc. you need to set preload=true. |
| 0.4 | 0.9 | Comments |
|---|---|---|
| setUrl(url) | setHref(url) | Get content in url |
| abort | cancel | Abort a download |
| setHandler(function) | deleted | |
| addOnLoad(function) | deleted | onLoad event still exists for setContent/setHref - while you cant call addOnLoad() you can connect to this event to achieve similiar goals |
| addOnUnload(function) | deleted | onUnLoad event still exists for setContent/setHref - while you cant call addUnOnload() you can connect to this event to achieve similiar goals |
| show | deleted | |
| hide | deleted | |
| loadContents | deleted | |
| splitAndFixPaths | deleted | |
| onExecError | deleted | |
| Inherited methods (the commonly used ones) | ||
| addChild | deleted | |
| removeChild | deleted | |
| onClose | deleted | |
| onShow | deleted | |
| onHide | deleted | |
| 0.4 | 0.9 | Comments |
|---|---|---|
| extractContent default true | extractContent default false | Grab content within ... throw away the rest. Prevents DOM fault when content includes tags that belongs to <head> |
Examples
Create a ContentPane dynamically: in 0.4
var cpane = dojo.widget.createWidget({properties...});
dojo.body().appendChild(cpane.domNode);
in 0.9
var cpane = new dijit.layout.ContentPane({properties...}, dojo.doc.createElement('div'));
dojo.body().appendChild(cpane.domNode);
cpane.startup(); // start loading href if href is set
NOTE! You must include a sourcenode when creating a ContentPane, the auto create element feature in 0.4 is deletedYou should also call startup() to get things rolling.
Tabs sample, creation from markup: in 0.4
<div id="tab1" dojoType="ContentPane" href="tab1.html"
style='display:none' label="Tab 1"></div>
<div id="tab2" dojoType="ContentPane" href="tab2.html"
refreshOnShow="true" label="Tab 2"></div>
</div>
<div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html"
title="Tab 1"></div>
<div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html"
title="Tab 2" refreshOnShow="true" selected="true"></div>
</div>
NOTE! in 0.9beta there is a bug that breaks refreshOnShow, trac #3764
Adding a ContentPane to a TabContainer
// create a ContentPane
var newChild = new dijit.layout.ContentPane({
href:'remotepage',
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();
NOTE! you must call .startup() after you have addChild() it to your parent
Connecting a callback to a widget within content
Although scripts handling have been removed from ContentPane, you can still attach a callback to some widgets within your content because the dojo.parser in 0.9 supports makes it possible.
Imagine this content:
<span dojoType='dijit.form.InlineEditBox'>
<input name='date' value='2007-12-31'
dojoType='dijit.form.DateTextbox'/>
<script type='dojo/method' mode='connect' event='onChange'>
saveNewDate(this.name, this.getValue()); // delegate to a global function to save bandwidth
</script>
</span>
Setting parseOnLoad=false obviously turns of this feature.
LinkPane → dijit.layout.LinkPane
dojo.require("dijit.layout.LinkPane");
dijit.layout.LinkPane has no LinkPane specific changes, just the one introduced in the baseclass ContentPane.
LinkPane is usefull when you want a degradable page, that still lets the user read the content even if JS is turned of.
Example
<a id="tab1" dojoType="dijit.layout.LinkPane" href="tab1.html"
title="Tab 1">tab1</a>
<a id="tab2" dojoType="dijit.layout.LinkPane" href="tab2.html"
title="Tab 2" refreshOnShow="true" selected="true">tab2</a>
</div>
If Js is working though it will transform into a nice looking Tab widget.
TODO: (talk about dojox.layout.ContentPane, which features should it has, or elsewhere in Dojox part of Book??)
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post

i am in trouble with ContentPane
i use dojo0.9 , but dijit.layout.ContentPane didn't support "executeScript" any more . and there is not dojox ContentPane now . how can i do ? i read the code about 0.4.3 ContentPane , it's difficult to copy codes to quickly use, there are lots of Regex.
is there a easy way to solve the problem?
get the latest code
In the latest code (post beta) there is a dojox.ContentPane... see archive.dojotoolkit.org/nightly
thanks
thanks a lot
So there's no replacement for a "handler"?
Or is there any solution that is just not mentioned? I have to dynamically create a new URL out of the page to load a ContentPane which was nicely done in 0.4 using the handler...
if you don't have a solution (will it come with 1.0?) I'll have to customize my ContentPane 0.9...
Would be great if I could do it another way.
override?
Nothing built in; we didn't think anyone was using that. I think you can just override _downloadExternalContent(), like
<div dojoType=dijit.layout.ContentPane>
<script type="dojo/method" event="_downloadExternalContent">
this.href = ....;
dijit.layout.ContentPane.prototype._downLoadExternalContent.apply(this, arguments);
</script>
</div>
Thanks for the quick reply, but...
The handler was used before, because the creation mechanism of the URL was using an dojo.io.bind to get parts of the URL from the Server. After the results were returned, setContent was called. That's why your solution wouldn't work (even though I learned something from it concerning dojo/method ^^).
Where&How can I hook my URL-producing function to?
ok
Maybe you want to override _downloadExternalContent() completely then. You'll have to look at the ContentPane code and play it with it a bit.
need example of setContent onLoad event for ContentPane
I am trying to find an example of the following for use with a dijit.layout.ContentPane within a TabContainer
"onLoad event still exists for setContent/setHref - while you cant call addOnLoad() you can connect to this event to achieve similiar goals" (from the above)
I've tried dojox.layout.ContentPane, but there is a bug in refreshOnShow that precludes using it until 1.1 (at least at my limited level of expertise). I want to prevent caching, and dynamically set a few nodes' innerHTML on each refresh.
found (perhaps obvious) way to connect to selectChild, setHref
I figured out one way of doing this, which may have been obvious to someone less of a beginner:
var w =dijit.byId("mainTabContainer");
dojo.connect(w, "selectChild", oscars.Form.stateChanged);
});
dojo.addOnLoad(function(){
var w =dijit.byId("sessionPane");
dojo.connect(w, "setHref", oscars.Form.hrefChanged);
});
on the main page instantiating the tab container and a content pane named sessionPane. The selectChild rather than the onLoad event was what I was interested in.
In oscars.Form,
oscars.Form.stateChanged = function(contentPane) { // contentPane is ContentPane widget console.log(contentPane.id); } oscars.Form.hrefChanged = function(newUrl) { console.log(newUrl); }