Check documentation for the latest version of dhtmlxSuite Adding DHTMLX Components to Window DHTMLX Docs
Samples Forum Support
Documentation / Suite 5.X
StartWindows

Adding DHTMLX Components to Window

The following components can be attached to a window's cell:

Note, Menu, Toolbar and status bar can be attached to the whole window.


To attach a DHTMLX component to a window's cell - make the following steps:

  1. Download a package with the needed component from the server
  2. Set pathes to necessary files into the <head> tag of your HTML page. The files to which the paths need to be specified, should be checked in the corresponding documentation described work with this component.
  3. And use one of the methods shown below:

Note, you can insert windows into each other to create various complex structures.

var dhxAccord = myWins.window("a").attachAccordion();
var dhxBar = myWins.window("a").attachToolbar();
var dhxDataView = myWins.window("a").attachDataView();
var dhxEditor = myWins.window("a").attachEditor();
var dhxForm = myWins.window("a").attachForm();
var dhxGrid = myWins.window("a").attachGrid();
var dhxLayout=myWins.window("a").attachLayout();
var dhxMenu = myWins.window("a").attachMenu();
var dhxSBar = myWins.window("a").attachStatusBar();
var dhxTabbar = myWins.window("a").attachTabbar();
var dhxTreeGrid = myWins.window("a").attachTreeGrid();
var dhxTree = myWins.window("a").attachTree();

These methods, except attachStatusBar(), return dhtmlx[component] objects, which you can customize according to your needs.

If you want to attach dhtmlxGrid with paging - use the attachObject() method that attaches container with grid and paging area:

myWins.window("a").attachObject("paging_container");

dhtmlxScheduler specificity

Please note, attachScheduler differs from the other attach[component] methods. The reason is that attachScheduler not only attaches the component but also initializes it, creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, do this before attaching to the layout.
var myWins = new dhtmlXWindows()
myWins.createWindow("about", 50, 50, 300, 200);
 
 
scheduler.config.xml_date="%Y-%m-%d %H:%i";
myWins.window("a").attachScheduler(null,"month", "scheduler_here");scheduler.load("../common/events.xml");

Using dhtmlxLayout and dhtmlxWindows together

Sometimes using layout, you may need to show a pop-up window. Make the following steps for it:

  1. Create an instance of dhtmlxWindows
  2. Create a window As far as layout is based on windows as well, you can use a dhtmlxWindows instance that has been already created by layout. This allows you to reduce used memory and increase script's performance:
// creating layout instance
var myLayout = new dhtmlXLayoutObject("3L");
...
// creating pop-up window from layout's dhtmlxWindows' instance
var popupWindow = myLayout.dhxWins.createWindow("popupWindow", ...);

There are cases when some windows' ids are already used by layout so you can't use them for creating another windows. How can you identify the ids you are not allowed to use? There is a function that allows you to check availability of any 'id':

// check if id in use
if (myLayout.dhxWins(id)) {
    // id is already in use, checked id can not be used for new window
} else {          
    // id is free for use
}
Back to top