Login Register

Common Features

Attributes, Methods, Extension Points

Each Dijit component has interaction points, so you can customize them for your app. In order of complexity:

  • An attribute is a data element used for controlling display or behavior. For example, the label attribute of a ContentPane displays when that pane is part of a TabbedContainer.

    Attributes are settable only at creation time. That means you can set them in the declarative tag, or in the new dijit.___() call. After that, you may not set them directly. Some attributes can be changed by a method call, usually with the name setAttributeName(). We'll note these in the guide where applicable.

  • A method is a function you call to control something. For example, in a NumberSpinner the user can click the Up and Down buttons to adjust a number. But you can call the method adjust() to do the same thing.
  • An extension point is a function you provide to override behavior. For example, a ValidationTextBox has an isValid() extension point. If your validation involves several fields or needs more power than regular expressions provide, you can create a new subclass of ValidationTextBox and provide your own isValid function.

Common Attributes

These attributes may be specified in any widget, in addition to all the normal HTML attributes (which are simply passed through unchanged to the finished widget).

Attribute Type or values Default Description
domNode Node None this is our visible representation of the widget! Other DOM Nodes may by assigned to other properties, usually through the template system's dojoAttachPoint syntax, but the domNode property is the canonical "top level" node in widget UI. In non-templated widgets, this will equal the srcNodeRef.
id String None a unique, opaque ID string that can be assigned by users or by the system. If the developer passes an ID which is known not to be unique, the specified ID is ignored and the system-generated ID is used instead.
lang String djConfig.locale or default provided by navigator object overrides the page-wide setting to use a different language for this widget only. Must choose from bootstrapped languages in djConfig.extraLocale. It's usually best to default to the page settings so that the page can be localized with a single setting or the default. Use of this attribute is typically limited to demonstrations or pages with multiple languages besides the user's.
layoutAlign String Depends onorder within LayoutContainer Only applies to Dijit components in dijit.layout.LayoutContainer. Possible values: "left", "right", "bottom", "top", and "client". The LayoutContainer takes its children marked as left/top/bottom/right, and lays them out along the edges of the box, and then it takes the child marked "client" and puts it into the remaining space in the middle.
srcNodeRef Node DOM Node which has the dojoType attribute. Consider this attribute Read Only. In templated widgets, usually this node will disappear, replaced by a filled-in template.

Extension Points

Both methods and extension points are JavaScript functions, and the difference between them is a semantic one. We use the term method for "functions programmers normally call" and extension point for "functions the Dijit component normally calls". There's no technical reason you couldn't call an extension point yourself, or override a method yourself, but it makes little sense to do so.

You can easily provide an extension point function for declarative elements. As an example, here's how to extend a ValidationTextBox:

  1. First, find the extension point on the appropriate Dijit page. In our case, it's dijit.form.ValidationTextBox.isValid
  2. Copy the signature from the API documentation. For example, isValid() for ValidatingTextBox has signature function(/* Boolean*/ isFocused) and returns a boolean.
  3. Then, use a dojo/method call directly in the markup, like this:
    <input dojoType="dijit.form.ValidatingTextBox" isValid="my.form.isValid"  ...>
            <script type="dojo/method" event="isValid">
                // Flip a coin to determine validity.  *evil laughter!* 
                return Math.round(Math.random() * 100) % 2 == 0;
            </script>       
       </input>

Of course, if your isValid function is the same for many widgets, you don't want to define it over and over. So alternatively:

  1. Follow first 2 steps above
  2. Write your function:
    my.form.isValid = function(isFocused) {
       // Flip a coin to determine validity.  *evil laughter!* 
       return Math.round(Math.random() * 100) % 2 == 0;
    }
  3. Connect the function to the extension point through an HTML attribute:
    <input dojoType="dijit.form.ValidatingTextBox" isValid="my.form.isValid" .../>

Other Things You Can Do With Dijit

  • You can change the style individual components, a Dijit class, or even create an entire theme spanning all Dijit components. The Themes and Design section tells you how.
  • You can create all Dijit components programmatically as well as declaratively (through markup). All attributes, methods and extension points are available through JavaScript.
  • You can create subclasses of existing Dijit classes, or create your own from scratch, described in the Writing Your Own Widget section.

Where does "my.form" come from? This page doesn't define it.

I'm trying to do something similar with a d.f.CheckBox:

<input type="checkbox" dojoType="dijit.form.CheckBox" id="sectionb" name="sectionb" tabindex="103" onClick="my.form.onClick <- ???">
                <script type="dojo/method" event="onClick"> skip_section('b'); </script>
        </input>

Why do I need to refer to a form? What is the form for? Why does the widget care about what form it's in? What if I don't want to put the control in a form? The page doesn't explain any of these things or link to where it is explained that I can see.

[Solved] I just used the onclick attribute in the end.

I hadn't migrated the function called ( skip_section() ) from 0.4 properly so it used .set/getValue() rather than .checked and .setChecked(bool) . But the documentation could still be clarified here, I think.

I don't think this works in templates

Dropping a comment here in case anyone else runs into the same problem - the <script type="dojo/method" event="onChange"> approach doesn't seem to work when it is applied to a widget declaration in templates for custom widgets. or at least, i couldn't get it to register an onChange handler for me for a sub-widget in a compound widget template file. However, using a dojoAttachPoint and registering a handler is dojo.connect in the parent widget's JS declaration worked just fine.

The dojo/connect example will not work

<input ...> tags are self-closing. This means that any tags inside them will actually appear as siblings rather than children. With the script tags as siblings, they will not get picked up by the parser.

To make it work, change the outer tag from input to div. See #5594.