JavaScript DHTML/SmartClient/Form Fields — различия между версиями

Версия 10:00, 26 мая 2010

Содержание

1 Add access key to form
2 Clickable form icon
3 Data bound dependent select field
4 Dependent select: local data
5 Dependent select: remote data
6 Prefill form value
7 Preset form field value
8 Preset form value
9 Show/hide form

Add access key to form

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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">
<div id="gridDiv">
<SCRIPT>
isc.DynamicForm.create({
    width: 400,
    fields: [
        {name: "uid", title: "User ID", accessKey: "I"},
        {name: "firstName", title: "First Name", accessKey: "F"},
        {name: "lastName", title: "Last Name", accessKey: "L"},
        {name: "email", title: "Email", accessKey: "E"},
        {name: "homeSite", title: "Home Site", accessKey: "H"},
        {name: "sex", title: "Sex", accessKey: "S", type: "select", valueMap: ["M","F"]},
        {name: "dob", title: "Date of Birth", accessKey: "B", type: "date"}
    ]
});
</SCRIPT>
</div>
</BODY>
</HTML>

Clickable form icon

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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: 200,
    fields : [
        {name: "severityLevel",
         title: "Severity Level",
         type: "staticText",
         defaultValue: "Severity 2",
         helpText: "<br><b>Severity 1</b> - Critical problem<br>System is unavailable in production or " +
                   "is corrupting data, and the error severely impacts the user"s operations." +
                   "<br><br><b>Severity 2</b> - Major problem<br>An important function of the system " +
                   "is not available in production, and the user"s operations are restricted." +
                   "<br><br><b>Severity 3</b> - Minor problem<br>Inability to use a function of the " +
                   "system occurs, but it does not seriously affect the user"s operations.",
         icons: [{
            src: "other/help.png",
            click: "isc.say(item.helpText)"
         }]
        }
    ]
});


</SCRIPT>
</BODY>
</HTML>

Data bound dependent select field

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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: 500,
    numCols: 4,
    fields: [
        {name:"categoryName", title:"Category", editorType:"select", 
         optionDataSource:"supplyCategory", changed:"form.clearValue("itemName");" 
        },
        {name: "itemName", title:"Item", editorType: "select", 
         optionDataSource:"supplyItem", 
         getPickListFilterCriteria : function () {
            var category = this.form.getValue("categoryName");
            return {category:category};
         }
        }
    ]
});

</SCRIPT>
</BODY>
</HTML>

Dependent select: local data

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>
// ---------------------------------------------------------------------------------------
// Local Data Example
isc.Label.create({
    contents: "Local Data",
    width: "90%",
    height: 25,
    autoDraw: true,
    baseStyle: "exampleSeparator"
});
isc.DynamicForm.create({
    top: 45,
    width: 500,
    numCols: 4,
    autoDraw: true,
    fields: [
        {name: "division",
         title: "Division",
         type: "select",
         valueMap: ["Marketing", "Sales", "Manufacturing", "Services"],
         changed: "form.getField("department").setValueMap(item.departments[value])",
         departments: {
            Marketing: ["Advertising", "Community Relations"],
            Sales: ["Channel Sales", "Direct Sales"],
            Manufacturing: ["Design", "Development", "QA"],
            Services: ["Support", "Consulting"]
         }
        },
        {name: "department",
         title: "Department",
         type: "select",
         addUnknownValues:false
        }
    ]
});

</SCRIPT>
</BODY>
</HTML>

Dependent select: remote data

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

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

// ---------------------------------------------------------------------------------------
// Remote Data Example
isc.Label.create({
    contents: "Remote Data",
    top: 120,
    width: "90%",
    height: 25,
    autoDraw: true,
    baseStyle: "exampleSeparator"
});
isc.DynamicForm.create({
    top: 165,
    width: 500,
    numCols: 4,
    autoDraw: true,
    fields: [
        {name:"categoryName", title:"Category", editorType:"select", 
         optionDataSource:"supplyCategory", changed:"form.clearValue("itemName");" 
        },
        {name: "itemName", title:"Item", editorType: "select", 
         optionDataSource:"supplyItem", 
         getPickListFilterCriteria : function () {
            var category = this.form.getValue("categoryName");
            return {category:category};
         }
        }
    ]
});

</SCRIPT>
</BODY>
</HTML>

Prefill form value

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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 formItems = [
    {
       name:"requiredIf", 
       title:"requiredIf - true",
       validators:[
          {
              type:"requiredIf", 
              errorMessage:"Value must be non-empty.", 
              expression:"true"
          }
       ]
    },
    {
       type:"rowSpacer"},
    // Submit button for form - will perform automatic client side validation before submission
    // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
    // {title:"Submit Form", type:"submit", align:"center"}
    // Button to call validation demonstration function
    {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
    ],

    formValues = {
        requiredIf:"x",
    };
DynamicForm.create({
    ID:"simpleForm",
    left:20,
    top:40,
    items:formItems,
    values:formValues,
    width:600,
    titleWidth:200
});

//    A function to demonstrate form validation, and alert on success
//    Note: Validation is performed automatically on form submission -
//    no explicit call to the form.validate() function usually required.
function validateForm(){
    if(simpleForm.validate()){
    alert ("Form validation was successful!");
    simpleForm.redraw();
    };
};
</SCRIPT>
</BODY>
</HTML>

Preset form field value

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Form item annotations example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<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>

Preset form value

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Form initialization example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
var    formItems = [
    {name:"commonName", title:"Animal", type:"text"},
    {name:"scientificName", title:"Scientific Name", type:"text"},
    {name:"diet", title:"Diet", type:"text"},
    {name:"lifeSpan", title:"Life Span", type:"text"},
    {name:"status", title:"Endangered Species Status", type:"text"},
    {title:"Submit Form", type:"submit"}
    ],
    formValues = {
    commonName:"Nurse Shark",
    scientificName:"Ginglymostoma cirratum"
    },
    formErrors = {
    commonName:"error 1"
    }
;
DynamicForm.create({
    ID:"simpleForm",
    left:20,
    top:45,
    items:formItems,
    values:formValues,
    errors:formErrors,
    canSubmit:true
});

</SCRIPT>
</BODY>
</HTML>

Show/hide form

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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,
    fields: [
        {name:"onOrder",
         type:"checkbox",
         title:"Shipment on order",
         redrawOnChange:true,
         width:50
        },
        {name:"orderDate",
         type:"date",
         title:"Order Placed",
         showIf:"form.getValue("onOrder") == true",
         required:true
        }
    ]
});


</SCRIPT>
</BODY>
</HTML>

JavaScript DHTML/SmartClient/Form Fields — различия между версиями

Версия 10:00, 26 мая 2010

Содержание

Add access key to form

Clickable form icon

Data bound dependent select field

Dependent select: local data

Dependent select: remote data

Prefill form value

Preset form field value

Preset form value

Show/hide form

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:27, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 10:00, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)