Using multiple components in a SINGLE style

Home > Basic examples > Example 11

Explanation

You can use multiple components on a single page at the same time in a SINGLE style.

The SINGLE style does not support virtual files and only one local file can be uploaded.

<!-- Defining the container that holds the two components -->
<div id="dext5-container-a" style="width:500px; height:28px;"></div>
<div id="dext5-container-b" style="width:500px; height:28px;"></div>
<!-- Defining the container that will hold the component responsible for the actual upload -->
<!-- The uploader is defined as a 1px container so that it can not be seen easily. -->
<div id="dext5-container-uploader" style="width:1px; height:1px;"></div>

Define the component.

// The SINGLE style does not define a button because it has a built-in button.
dx5.create({ style: "single", id: "dext5-a", parentId: "dext5-container-a" });
dx5.create({ style: "single", id: "dext5-b", parentId: "dext5-container-b" });
// Do not define it as SINGLE because the uploading component must upload multiple files at the same time.
dx5.create({ id: "dext5-uploader", parentId: "dext5-container-uploader" });

Example

File upload A area (ID: dext5-a)

File upload B area (ID: dext5-b)