Export Docking Layout

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 id="window1" style="height: 100px">
<div>Header 2</div>
<div>Content 2</div>
<div style="overflow: hidden;">
<div id="window2" style="height: 100px; ">
<div>Header 3</div>
<div>Content 3</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"}

About admin

This entry was posted in jQuery Plugins, jQuery Widgets, jqxDock and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply