JavaScript DHTML/SmartClient/DynamicForm
Create DynamicForm
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.ListGrid.create({
fields:[ {type:"text", title:"System", name:"system"}, {type:"text", title:"Monitor Name", name:"monitor"} ], ID:"listGrid", canEdit:true, editEvent:"click", autoDraw:false
}) isc.HTMLFlow.create({
ID:"statusReport", padding:5, border:"1px solid #808080", setNewStatus : function (system) { this.setContents(system + ": Normal
"); }
}) isc.ImgButton.create({
ID:"addButton", autoDraw:false, src:"[SKIN]actions/add.png", size:16, showFocused:false, showRollOver:false, showDown:false, click : "listGrid.startEditingNew()"
}); isc.ImgButton.create({
ID:"removeButton", autoDraw:false, src:"[SKIN]actions/remove.png", size:16, showFocused:false, showRollOver:false, showDown:false, click : "listGrid.removeSelectedData()"
}); isc.DynamicForm.create({
ID: "systemSelector", height:1, width:75, numCols:1, fields: [ {name: "system", type: "select", width:120, showTitle: false, valueMap: ["Development", "Staging", "Production"], defaultValue:"Development", change : "statusReport.setNewStatus(value)" } ]
}); isc.SectionStack.create({
sections:[ { items:listGrid, title:"Monitors", controls:[addButton, removeButton], expanded:true }, { items:statusReport, title:"Status", controls:systemSelector, expanded:true } ], visibilityMode:"multiple", animateSections:true, height:400, width:300, overflow:"hidden"
}) statusReport.setNewStatus(systemSelector.getValue("system"));
</SCRIPT> </BODY> </HTML>
</source>