Dojo dijit.form.button not loaded

Question

I have the following code :

require(["dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button", "dojo/query", "dojo/domReady!"], function(registry, BorderContainer,  ContentPane, Button, query){

var appLayout = new BorderContainer({
    design: "sidebar"
}, "appLayout");

var dataArea = new ContentPane({
    region: "center",
    content: '<div id="grid"></div>'
});

var actionArea = new ContentPane({
    region: "bottom",
    id: "actionarea",
    content: '<button id="computer"></button>'
});

var treeArea = new ContentPane({
    region: "left",
    id : "treearea",
    content: '<div id="treeroot"></div>',
    splitter: true
});

var button = new Button({
    label: "Load Computer tree"
}, "computer");

appLayout.addChild(treeArea);
appLayout.addChild(dataArea);
appLayout.addChild(actionArea);
appLayout.startup();
button.startup();
});

All the layouts are loaded correctly but my button is not loaded.

I tried to query #computer before the button.startup() call and it is loaded well.

appLayout.addChild(treeArea);
appLayout.addChild(dataArea);
appLayout.addChild(actionArea);
appLayout.startup();

console.log(query("#computer"));

button.startup();
});

thank you in advance for any help

Answer 1

Don't create the button in markup

var actionArea = new ContentPane({
    region: "bottom",
    id: "actionarea"
});

and just set the button widget as the content

var button = new Button({
    label: "Load Computer tree"
}); 
actionArea.set('content', button);

Here's a working example: http://jsfiddle.net/cswing/V6qK2/