How to make a Dojo dijit form programmatically

Question

Im new to Dojo and im trying to make some ui, but only using the programmatic way.

I would like if someone could show me some example of how to make a form programmarically using Dojo dijit.form.Form. I've been looking for some example but all i can find is the declarative way of it.

Answer 1

A more object oriented solution:

define( [
"dojo/_base/declare", 
"dijit/form/Form",
"dijit/form/Textarea",
"dijit/form/Button"
],

function(declare, Form, TextArea, Button) {
    return declare( "mypackage.MyForm", Form, {
        textarea: new TextArea({}),

        submitButton: new Button({
            type: "submit",
            label: "ready!"
        }),

        constructor: function(args) {
            declare.safeMixin(this, args);
        },

        onSubmit: function() { 
            alert(this.textarea.get('value')); 
        },

        postCreate: function() {
            this.domNode.appendChild( this.textarea.domNode );
            this.domNode.appendChild( this.submitButton.domNode );
        }
    });
}
);

Just drop a new mypackage.MyForm({}) at any place you might expect a widget.

Answer 2

Its pretty straight forward. You just create all the pieces of the the form, and then append all the pieces to their respective parent. To create the form objects, like any dijit object, you pass the constructor a param object, and a domNode to place it at, like so:

var resetbtn = new dijit.form.Button({
    type: 'reset',
    label: 'Reset'
}, dojo.doc.createElement('button'));

The full example is here. To find out what properties can be added to the params object, see the API Docs. Any of the properties can be added to the param list.