DHTMLX Docs & Samples Explorer

Tips 'n Tricks: Customized Form in Window

Source
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
    <script src="../../../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <style>
        div#vp {
            height: 600px;
            border: 1px solid #cecece;
        }
        
        /* block's bottom border, height and overflow */
        .block_dhxform_item_label_left.myBlock .dhxform_obj_dhx_skyblue.dhxform_block {
            height: 265px;
            overflow: auto;
            border-bottom: #a4bed4 1px solid;
        }
    </style>
    <script>
var myForm,
formData;
var dhxWins,
w1;
 
function doOnLoad() {
 
    // init windows
    dhxWins = new dhtmlXWindows();
    dhxWins.setImagePath("../../../dhtmlxWindows/codebase/imgs/");
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo("vp");
    w1 = dhxWins.createWindow("w1", 10, 10, 400, 350);
    w1.clearIcon();
    w1.denyResize();
    w1.denyPark();
    w1.button("minmax1").hide();
    w1.button("park").hide();
    w1.button("close").disable();
 
    // attach form
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 145,
        inputWidth: 150
    }, {
        type: "block",
        inputWidth: 382,
        className: "myBlock",
        list: [
{
            type: "radio",
            name: "type",
            label: "Already have account",
            labelWidth: "auto",
            position: "label-right",
            checked: true,
            list: [{
                type: "input",
                label: "Login",
                value: "p_rossi"
            }, {
                type: "password",
                label: "Password",
                value: "123"
            }, {
                type: "checkbox",
                label: "Remember me",
                checked: true
            }]
            }, {
            type: "radio",
            name: "type",
            label: "Not registered yet",
            labelWidth: "auto",
            position: "label-right",
            list: [{
                type: "input",
                label: "Full Name",
                value: "Patricia D. Rossi"
            }, {
                type: "input",
                label: "E-mail Address",
                value: "p_rossi@example.com"
            }, {
                type: "input",
                label: "Login",
                value: "p_rossi"
            }, {
                type: "password",
                label: "Password",
                value: "123"
            }, {
                type: "password",
                label: "Confirm Password",
                value: "123"
            }, {
                type: "checkbox",
                label: "Subscribe on news"
            }]
            }, {
            type: "radio",
            name: "type",
            label: "Guest login",
            labelWidth: "auto",
            position: "label-right",
            list: [{
                type: "select",
                label: "Account type",
                options: [{
                    text: "Admin",
                    value: "admin"
                }, {
                    text: "Organiser",
                    value: "org"
                }, {
                    text: "Power User",
                    value: "poweruser"
                }, {
                    text: "User",
                    value: "user"
                }]
                }, {
                type: "checkbox",
                label: "Show logs window"
            }]
            }]
        }, {
        type: "button",
        position: "absolute",
        inputTop: 276,
        inputLeft: 143,
        value: "Proceed"
    }];
    myForm = w1.attachForm(formData);
 
    // add border and adjust window size
    w1.vs[w1.av].dhxcont.firstChild.style.border = "#a4bed4 1px solid";
    dhxWins._engineRedrawWindowSize(w1);
 
}
</script> <div id="vp"></div>