- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Interacting With Widgets
Submitted by OpenBip on Tue, 06/05/2007 - 18:22.
Overview
This section discusses how to programmatically retrieve a reference to a widget, and how to use that reference to interact with the widget.
Getting the Widget Reference
In order to programmatically interact with a widget, you need a variable that references that widget.
- Retaining a Widget Reference
- If the widget was created programmatically, you can simply retain
a reference to what you created:
var widgetReference = new dijit.form.Button(params, srcNodeRef);
- Obtaining a Widget Reference
- If the widget was created declaratively, or you didn't retain a
reference to a programmatically-created widget, you can obtain a reference
to the widget object if you know its widgetId. You do this using
dijit.byId("idOfWidget")
<div dojoType="dijit.form.Button" label="Click" id="button1"></div>dojo.addOnLoad(function() {Note: This is different than a DOM id. In the above example,
var widgetReference = dijit.byId("button1");
widgetReference.setLabel("Don't Click!");
});dijit.byId("button1")
returns a reference to the widget, anddojo.byId("button1")
returns a reference to the actual DOM node of the button.
Using the Reference
-
The DOM Node
You can access the (root) DOM node of the widget via the "domNode" property of the reference.
-
Common Dijit-Widget Interactions
- Popups
- Popups can be opened/closed using open() and close()
- StackContainer widgets
- StackContainer widgets such as TabContainer and AccordionContainer use a transition() method to switch between two widgets (for example, you might do chained animation, fading out one widget before wiping in the second).
-
Animations
You can make an arbitrary animation to show/hide a widget using the dojo.fx code (slideIn, fadeIn, or something more complicated using animateProperty and/or combined animations on myWidget.domNode
-
Events
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post