JavaScript DHTML/SmartClient/Form Layout
Содержание
Change title orientation for a form
<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/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
ID: "exampleForm", width: 250, fields: [ {name: "username", title: "Username", type: "text", required: true, defaultValue: "bob" }, {name: "email", title: "Email", required: true, type: "text", defaultValue: "bob@isomorphic.ru" }, {name: "password", title: "Password", required: true, type: "password" }, {name: "password2", required: true, title: "Password again", type: "password" } ]
}); isc.Button.create({
left: 300, title: "Swap titles", click: function () { exampleForm.setTitleOrientation(exampleForm.titleOrientation == "top" ? "left" : "top"); }
});
</SCRIPT> </BODY> </HTML>
</source>
Create FormLayout and layout text field, button
<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.FormLayout.create({
autoFocus: true, numCols: 3, items:[ { type: "text", name: "you", title: "Enter your name", selectOnFocus: true, wrapTitle: false, defaultValue: "my friend" }, { type: "button", title: "Hello", width: 80, startRow: false, icon: "", click: "isc.say("Hello " + form.getValue("you") + "!")" } ]
})
</SCRIPT> </BODY> </HTML>
</source>
Form layout: column span and row span
<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/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Form layout example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
var formItems = [
{name:"item1", title:"field 1", width:100, height:50, rowSpan:2, type:"textArea"}, {name:"item2", title:"field 2", width:80}, {name:"item3", title:"field 3", width:80, align:"right"}, {name:"item4", title:"field 4", width:308, colSpan:4}, {name:"item5", title:"field 5", width:100, endRow:true}, {name:"item6", title:"field 6", width:100}, {name:"item7", title:"field 7", width:100, startRow:true}, {name:"item8", title:"field 8", width:100} ], formValues = { item1:"rowSpan:2", item2:"width:80", item3:"align:right", item4:"colSpan:4", item5:"endRow:true", item6:"", item7:"startRow:true", item8:"" };
DynamicForm.create({
ID:"layoutForm", left:20, top:40, width:400, numCols:4, items:formItems, values:formValues
}); </SCRIPT> </BODY> </HTML>
</source>
Form layout: control type
<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/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Form item annotations example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
var formItems = [
{ type:"header", defaultValue:"Item title and hint" }, { type:"rowSpacer" }, { name:"titleHint", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint (required field)" }, { type:"rowSpacer" }, { name:"titleHintReq", title:"title text", hint:"hint text", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error" }, { type:"rowSpacer" }, { name:"titleHintError", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint example (required field)" }, { type:"rowSpacer" }, { name:"titleHintExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error example (required field)" }, { type:"rowSpacer" }, { name:"titleHintErrorExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true } ], formValues = { titleHint:"value", titleHintReq:"value", titleHintError:"value", titleHintExample:"xxx", titleHintErrorExample:"xxx" }, formErrors = { titleHintError:"error text", titleHintErrorExample:"Your password must be at least 4 characters long." };
DynamicForm.create({
ID:"dynform", left:20, top:45, width:600, items:formItems, values:formValues, errors:formErrors
}); </SCRIPT> </BODY> </HTML>
</source>
Form layout: default value
<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/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Form item annotations example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
var formItems = [
{ type:"header", defaultValue:"Item title and hint" }, { type:"rowSpacer" }, { name:"titleHint", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint (required field)" }, { type:"rowSpacer" }, { name:"titleHintReq", title:"title text", hint:"hint text", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error" }, { type:"rowSpacer" }, { name:"titleHintError", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint example (required field)" }, { type:"rowSpacer" }, { name:"titleHintExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error example (required field)" }, { type:"rowSpacer" }, { name:"titleHintErrorExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true } ], formValues = { titleHint:"value", titleHintReq:"value", titleHintError:"value", titleHintExample:"xxx", titleHintErrorExample:"xxx" }, formErrors = { titleHintError:"error text", titleHintErrorExample:"Your password must be at least 4 characters long." };
DynamicForm.create({
ID:"dynform", left:20, top:45, width:600, items:formItems, values:formValues, errors:formErrors
}); </SCRIPT> </BODY> </HTML>
</source>
Form layout: error message
<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/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Form item annotations example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
var formItems = [
{ type:"header", defaultValue:"Item title and hint" }, { type:"rowSpacer" }, { name:"titleHint", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint (required field)" }, { type:"rowSpacer" }, { name:"titleHintReq", title:"title text", hint:"hint text", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error" }, { type:"rowSpacer" }, { name:"titleHintError", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint example (required field)" }, { type:"rowSpacer" }, { name:"titleHintExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error example (required field)" }, { type:"rowSpacer" }, { name:"titleHintErrorExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true } ], formValues = { titleHint:"value", titleHintReq:"value", titleHintError:"value", titleHintExample:"xxx", titleHintErrorExample:"xxx" }, formErrors = { titleHintError:"error text", titleHintErrorExample:"Your password must be at least 4 characters long." };
DynamicForm.create({
ID:"dynform", left:20, top:45, width:600, items:formItems, values:formValues, errors:formErrors
}); </SCRIPT> </BODY> </HTML>
</source>
Form layout: span
<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/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 300, numCols: 2, colWidths: [60, "*"], border:"1px solid blue", padding:5, canDragResize:true, resizeFrom:["R"], fields: [ {name: "subject", title: "Subject", type: "text", width: "*" }, {name: "message", type: "text", length: 5000, showTitle: false, colSpan: 2, width: "*" } ]
});
</SCRIPT> </BODY> </HTML>
</source>
Use rowSpacer to add space between rows
<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/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> var abcdArray = ["a", "b", "c", "d"],
abcdList = {a:"option a", b:"option b", c:"option c", d:"option d"},
formItems = [ {name:"item1", type:"header", defaultValue:"header value"}, {name:"item2", type:"blurb", defaultValue:"blurb value"}, {type:"rowSpacer"}, {name:"item3", title:"staticText", type:"staticText", defaultValue:"staticText value"}, ];
DynamicForm.create({
ID:"itemsForm", left:20, top:40, width:400, items:formItems, canSubmit:true // Required for the submit button to be operative
}); </SCRIPT> </BODY> </HTML>
</source>