JavaScript DHTML/SmartClient/Form Layout

Материал из Web эксперт
Перейти к: навигация, поиск

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>

<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>

<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>

<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>

<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>