Dojo widget defaults

Question

Hi All,

i'm currently writing a large scale application heavily based on the dojo toolkit. The whole app is working and standing, but one issue i can not find my way out with, is the creation of custom widgets. It would be useful because it would clean up my source code and also i can reuse this 'widgets' in later projects.

For example: i have a main toolbar, which i would like to call using

myapp.toolbar = new myapp.mainToolbar();

instead of using

myapp.toolbar = new new dijit.Toolbar({}, containerID);
var button1 = new dijit.form.Button({
            label: 'Delete',
            id: 'toolbarbutton1',
            showLabel: true,
            iconClass: "dijitEditorIcon dijitEditorIcon Delete"
         });
myapp.toolbar.addChild(button1);
...

So in short: how do i set up the whole toolbar somewhere else and call it as a simple object? Trying to figure out dojo.declare('myapp.mainToolbar', dijit.Toolbar, {...}) but then i get a bunch of errors like 'startup function not existing' etc...

I'd like to do all this programmatically, so without the template html and css files in a custom widget.

A link to a good tutorial or howto would be nice, although google nor yahoo! will reveal any extra's on this matter for me... :)

Answer 1

It works for me when I use declare with the superclass inside of an array:

 dojo.declare('myapp.mainToolbar', [ dijit.Toolbar ],
               {
                ....
                }
 );

 var x = new myapp.mainToolbar({ ... });
 x.startup();

Which kind of violates the docs. It should take one Function or an array of Functions.

Answer 2

There are multiple ways to do this.

It seems like your method of extending Toolbar should work (not sure why it didn't).

You can also declare a class that embeds Toolbar and the buttons, using widgetsInTemplate:

dojo.declare("MyToolbar", [dijit._Widget, dijit._Templated], {
     _widgetsInTemplate: true,
     templateString: '<div> <div dojoType=dijit.Toolbar>' +
                ' <button dojoType=dijit.form.Button ...

Note that the top node in MyToolbar can't have a dojoType, so I put Toolbar one level down.

Alternately you can do the same thing by using dijit.Declaration, see http://docs.dojocampus.org/dijit/Declaration.