SimpleVault

A handy control for quick and easy uploading of a file or a set of files.

Related sample:  Simple vault - DHTMLX Form

Related sample:  All dhxForm inputs - DHTMLX Form

Adding SimpleVault

You can easily add a SimpleVault control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "simpleVault",
            label: "files",
            labelInline: true,
            labelWidth: "50px",
            width:"450px"
        }
    ]
});

Attributes

You can provide the following attributes in the configuration object of a SimpleVault:

• type - (string) the type of a control, set it to "simpleVault"
• id - (string) the id of a control, auto-generated if not set
  
  
• parent - (string) the id of the parent control
• width - (string) the width of a control
• height - (string) the height of a control
• css - (string) adds style classes to a control
• disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
• label - (string) specifies a label for a control
• labelWidth - (string) sets the width of the label of a control
• hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
• labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
• name - (string) the name of a control
• required - (boolean) defines whether a control is required
• help - (string) adds a help message to a control
• preMessage - (string) a message that contains instructions for interacting with the control
• successMessage - (string) a message that appears in case of successful validation of the control value
• errorMessage - (string) a message that appears in case of error during validation of the control value
• gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
  
  
• autosend - (boolean) enables/disables automatic sending of an added file
• fieldName - (string) sets the file field name in the form data that is sent to the server
• params - (object) adds extra parameters for sending an XMLHttpRequest
• singleRequest - (boolean) defines whether files are sent in one request
• target - (string) sets an URL to the server-side script that will process file upload
• updateFromResponse - (boolean) updates file attributes with data from server response

Working with SimpleVault

You can manipulate a SimpleVault control by using methods of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("simpleVault_id").getValue();

List of the control methods:

• clear() - clears a value of a SimpleVault control
• clearValidate() - clears validation of a SimpleVault control
• getValue(): any[] - gets the current value of a SimpleVault control
• getWidget(): object - returns the dhtmlxVault widget attached to a SimpleVault control
• setConfig(config: object) - sets a new configuration for a SimpleVault control
• validate(): boolean - validates a SimpleVault control. Returns the result of validation: true, if a control is valid, otherwise - false

Working with the widget of SimpleVault control

There is a possibility to use methods of dhtmlxCalendar via the getWidget() method of a SimpleVault control.

For example, you can repaint Vault in the control. To do this, you need to get the widget attached to the SimpleVault control and then use the paint() method of dhtmlxVault widget.

var simpleVault = form.getItem("simpleVault_id").getWidget();  // -> Vault
simpleVault.paint(); // repaints Vault

Related sample:  Get widget of control - DHTMLX Form

Setting configuration of SimpleVault control

It is possible to update the configuration of a SimpleVault control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

form.getItem("simpleVault_id").setConfig({
    help: "Help information",
    required: true,
    label: "files",
    labelInline: true,
    labelWidth: "120px"
});

Back to top