Login Register

Interacting With Widgets

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() {
            var widgetReference = dijit.byId("button1");
            widgetReference.setLabel("Don't Click!");
          });
Note: This is different than a DOM id. In the above example, dijit.byId("button1") returns a reference to the widget, and dojo.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