Dojo Dijit Dynamic Table Container
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<div id="putWidgetHere"></div>
CSS
.labelsAndValues-labelCell {
background-color: lightgrey;
padding-left: 5px;
}
.labelsAndValues-valueCell {
padding-left: 20px;
background-color: lightblue;
}
JavaScript
dojo.require("dijit.dijit");
dojo.require("dojox.layout.TableContainer");
dojo.require("dijit.form.TextBox");
dojo.ready(function() {
// Create the TableContainer, and insert it into the DOM node with id "putWidgetHere".
// Add the custom class "labelsAndValues"
var programmatic = new dojox.layout.TableContainer({
cols: 1,
customClass: "labelsAndValues",
"labelWidth": "150",
"height":"70px",
}, dojo.byId("putWidgetHere"));
// Create four text boxes
var text1 = new dijit.form.TextBox({
label: "ProgText 1"
});
var text2 = new dijit.form.TextBox({
label: "ProgText 2"
});
var text3 = new dijit.form.TextBox({
label: "ProgText 3"
});
var text4 = new dijit.form.TextBox({
label: "ProgText 4"
});
// Add the four text boxes to the TableContainer
programmatic.addChild(text1);
programmatic.addChild(text2);
programmatic.addChild(text3);
programmatic.addChild(text4);
// Start the table container. This initializes it and places
// the child widgets in the correct place.
programmatic.startup();
});