Initializing List

To initialize List, you need to complete the following steps:

include dhtmlx.js and dhxtml.css files
place a container for a list on a page
run the list initialization

Step 1. Including Necessary Files

To start working with dhtmlxList, you need to include List js/css files on a page.

In order to use dhtmlxList as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxlist.css">
    <script src="codebase/dhtmlxlist.js"></script>
</head>

If you use dhtmlxList as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxList .js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Step 2. Creating Container

HTML container for List must have some sizes specified:

<div id="data_container" style="width:320px;height:396px;"></div>

Step 3. Initializing List

As only the "container" is mandatory, you need to define the template and the source of data to see any result on a page:

myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#"
    }
});
myList.add({
    Package:"test one",
    Version:"0.1",
    Maintainer:"dhtmlx" 
});

Other possible parameters are given in the article Object Constructor.

Since the add command is not a mandatory part of initialization, you will not have any visible objects on the page before some data isn't loaded into a list by the load or add commands.