<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>
    <script src="../../codebase/ext/dhtmlxform_item_container.js"></script>
    <style>
        div#vp {
            height: 600px;
            border: 1px solid #cecece;
        }
        .dhtmlx_skin_dhx_skyblue div.dhtmlx_wins_icon {
            display: none;
        }
        .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_title {
            padding-left: 10px;
        }
    </style>
    <script>
var myForm,
formData;
var dhxWins,
w1;
function doOnLoad() {
    formData = [{
        type: "settings",
        position: "label-top",
        labelWidth: "auto",
        inputWidth: 120,
        blockOffset: 12
    }, {
        type: "block",
        inputWidth: "auto",
        list: [{
            type: "settings",
            offsetTop: 8
        }, {
            type: "input",
            label: "Font:"
        }, {
            type: "newcolumn"
        }, {
            type: "input",
            label: "Font Style:",
            offsetLeft: 5
        }, {
            type: "newcolumn"
        }, {
            type: "input",
            label: "Size:",
            offsetLeft: 5,
            labelWidth: 78,
            inputWidth: 70
        }]
        }, {
        type: "block",
        inputWidth: "auto",
        list: [{
            type: "settings",
            offsetTop: 2
        }, {
            type: "select",
            name: "sel_font",
            label: "",
            options: [{
                value: "Arial",
                text: "Arial"
            }, {
                value: "Arial Black",
                text: "Arial Black"
            }, {
                value: "Calibri",
                text: "Calibri"
            }, {
                value: "Comic Sans MS",
                text: "Comic Sans MS"
            }, {
                value: "Consolas",
                text: "Consolas"
            }, {
                value: "Courier New",
                text: "Courier New"
            }, {
                value: "Georgia",
                text: "Georgia"
            }, {
                value: "Impact",
                text: "Impact"
            }, {
                value: "Lucida Console",
                text: "Lucida Console"
            }, {
                value: "Lucida Sans Unicode",
                text: "Lucida Sans Unicode"
            }, {
                value: "Microsoft Sans Serif",
                text: "Microsoft Sans Serif"
            }, {
                value: "Segoe Print",
                text: "Segoe Print"
            }, {
                value: "Segoe Script",
                text: "Segoe Script"
            }, {
                value: "Segoe UI",
                text: "Segoe UI"
            }, {
                value: "Symbol",
                text: "Symbol"
            }, {
                value: "Tahoma",
                text: "Tahoma"
            }, {
                value: "Times New Roman",
                text: "Times New Roman"
            }, {
                value: "Trebuchet MS",
                text: "Trebuchet MS"
            }, {
                value: "Verdana",
                text: "Verdana"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "select",
            name: "sel_type",
            label: "",
            offsetLeft: 5,
            options: [{
                value: "regular",
                text: "Regular"
            }, {
                value: "italic",
                text: "Italic"
            }, {
                value: "bold",
                text: "Bold"
            }, {
                value: "bold italic",
                text: "Bold Italic"
            }]
            }, {
            type: "newcolumn"
        }, {
            type: "select",
            name: "sel_size",
            label: "",
            offsetLeft: 5,
            inputWidth: 70,
            options: [{
                value: "8",
                text: "8"
            }, {
                value: "9",
                text: "9"
            }, {
                value: "10",
                text: "10"
            }, {
                value: "11",
                text: "11"
            }, {
                value: "12",
                text: "12"
            }, {
                value: "14",
                text: "14"
            }, {
                value: "16",
                text: "16"
            }, {
                value: "18",
                text: "18"
            }, {
                value: "20",
                text: "20"
            }]
            }]
        }, {
        type: "block",
        inputWidth: "auto",
        list: [
{
            type: "fieldset",
            label: "Effects",
            inputWidth: 122,
            offsetTop: 5,
            list: [{
                type: "checkbox",
                label: "Strikeout",
                position: "label-right"
            }, {
                type: "checkbox",
                label: "Underline",
                position: "label-right"
            }, {
                type: "select",
                label: "Color:",
                position: "label-top",
                inputWidth: 76,
                offsetTop: 5,
                options: [{
                    value: "black",
                    text: "Black"
                }]
                }]
            }, {
            type: "newcolumn"
        }, {
            type: "block",
            inputWidth: "auto",
            blockOffset: 0,
            list: [{
                type: "fieldset",
                inputWidth: 198,
                label: "Sample",
                offsetTop: 5,
                offsetLeft: 5,
                list: [{
                    type: "container",
                    name: "sample",
                    inputWidth: "auto",
                    inputHeight: 48
                }]
                }, {
                type: "select",
                label: "Script:",
                position: "label-top",
                inputWidth: 198,
                offsetTop: 5,
                offsetLeft: 5,
                options: [{
                    value: "western",
                    text: "Western"
                }]
                }]
            }
]
        }, {
        type: "block",
        inputWidth: "auto",
        list: [{
            type: "settings",
            offsetTop: 10
        }, {
            type: "button",
            value: "Ok",
            offsetLeft: 84
        }, {
            type: "newcolumn"
        }, {
            type: "button",
            value: "Cancel"
        }]
        }
];
 
    // init windows
    dhxWins = new dhtmlXWindows();
    dhxWins.setImagePath("../../../dhtmlxWindows/codebase/imgs/");
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo("vp");
    w1 = dhxWins.createWindow("w1", 10, 10, 380, 350);
    w1.setText("Font");
    w1.clearIcon();
    w1.denyResize();
    w1.denyPark();
    w1.button("minmax1").hide();
    w1.button("park").hide();
    w1.button("help").show();
 
    myForm = w1.attachForm(formData);
 
    // change select size
    for (var a in {
        sel_font: 1,
        sel_type: 1,
        sel_size: 1
    })
        myForm.getSelect(a).size = 7;
 
    // configure sample block
    myForm.getContainer("sample").innerHTML = "<div style='border: 1px solid #ddd; width: 153px;height: 35px;text-align:center;line-height:33px;'>AaBbXxYy</div>";
 
    // adjust window
    myForm.adjustParentSize();
}</script>
 
 
    <div id="vp"></div>