dhtmlxLayout provides several sizing options. These are:
There is a possibility to resize any item in the layout. However, there are some limitations in item sizing you need to know:
There are separate methods to set item's width and height:
To get width and height of the current item use the following code:
var width = myLayout.cells("a").getWidth(); var height = myLayout.cells("a").getHeight();
If you need to fix size of a certain layout's cell, use the fixSize method:
If you set both parameters to 'true', the user won't be able to resize the item horizontally and vertically.
Autosize means the ability of layout's items to adjust automatically to the changes of layout's dimensions.
Different patterns have different autosize settings. First of all, to configure autosize you need to define the pattern you are going to use.
For example let's use the pattern "3L". We'll write the minimal init code and call the listAutoSizes function.
To test autosize we need to change layout's parent container. Windows will help us to do this:
var dhxWins = new dhtmlXWindows(); var w1 = dhxWins.createWindow("w1", 1, 1, 400, 350);
Now init layout:
var myLayout = w1.attachLayout("3L"); var autoSizes = myLayout.listAutoSizes(); // console.log(autoSizes) => [ "b;c", // current horizontal autosize "a;c", // current vertical autosize ["a", "b;c"], // array with available horizontal autosizes ["a;b", "a;c"] // array with available vertical autosizes ]
Current horizontal and vertical autosizes are "b;c" and "a;c". It means that when you will resize window horizontally (i.e. change layout's parent width) - cells "b" and "c" will be resized. It works the same for vertical direction - in this case cells "a" and "c" will be resized.
Available autosizes tell you what other properties can be set.
The following screenshots will demonstrate the changes:
1) Initial window
2) Now let's resize the window horizontally and check how it works
3) The default autosize settings were applied. As you can see, cells "b" and "c" were resized
4) Now we will change horizontal autosize and repeat all the above steps again to see how it works. Available horizontal autosizes include "a" and "b;c" properties. We've already tested the "b;c" property, let's test the cell "a". For vertical autosize we will use the default value - "a;c".
Hit F5 to restore the initial window's settings
5) Resize the window again in the same way
6) Cell "a" was changed
The vertical dimension can be configured in the same way.Back to top