jqxDocking has a feature which allows you to Export its Layout to JSON and load it when you need. Import Layout from JSON is already demonstrated in this sample:
import-layout.htm. Now, lets see how to create a new instance of the jqxDocking widget and export its layout.
1. We’ll add the jqxDocking widget to a sample web page. The HTML structure of the docking is below:
<div id="docking"> <div style="overflow: hidden;"> <div id="window0" style="height: 100px"> <div>Header 1</div> <div>Content 1</div> </div> <div id="window1" style="height: 100px"> <div>Header 2</div> <div>Content 2</div> </div> </div> <div style="overflow: hidden;"> <div id="window2" style="height: 100px; "> <div>Header 3</div> <div>Content 3</div> </div> </div> </div>
To initialize the jqxDocking widget, we need to select the “docking” DIV tag and call the jqxDocking constructor function.
$('#docking').jqxDocking({ theme: 'classic', orientation: 'horizontal', width: 250, mode: 'default' });
To export the Docking’s layout, you need to call the “exportLayout” function.
var data = $('#docking').jqxDocking('exportLayout');
The “exportLayout” function for the HTML structure that we used, generates the following output:
{"panel0": {"window0":{"collapsed":false},"window1":{"collapsed":false}},"panel1": {"window2":{"collapsed":false}},"floating":{},"orientation": "horizontal"}
If we move one of the Docking Windows and call the “exportLayout” method again, the output is:
{"panel0": {"window0":{"collapsed":false},"window1":{"collapsed":false}},"panel1": {},"floating":{"window2":{"x":"535px","y":"312px","width":"113","height":"auto","collapsed":false}},"orientation": "horizontal"}
