Print Page - Create specialised layout using js scripts only

Title: Create specialised layout using js scripts only
Post by: alastairwalker on November 30, 2015, 02:21:20 AM

I am trying to create a specialised layout using only javascript statements.

(I was unable to attach an image - the upload folder was full - so the best I can do is provide an html table view, as follows:)

Code:

<table border="1">
<tbody>
<tr>
<td>North West</td>
<td rowspan="2">East<br /><br /></td>
</tr>
<tr>
<td>South West</td>
</tr>
</tbody>
</table>

The strategy that I need to follow appears to be:

a) create the center panel. (It will become south west)
b) split the center panel, using a north. (This will become the northwest panel.)
c) create the east panel.

I have looked carefully at all the examples for creating layouts, but I can't figure out how to create this specialised layout using js statements only.

Any help or guidance on how to achieve this goal will be really appreciated!

Alastair

Title: Re: Create specialised layout using js scripts only
Post by: stworthy on November 30, 2015, 04:08:51 AM

You can call 'add' method to create easy region panels dynamically on the layout.

Code:

$('#layout').layout({width:600,height:200});
$('#layout').layout('add', {
    region: 'east',
    width: '30%',
    split: true
}).layout('add', {
    region: 'center'
});
var ns = $('<div></div>').appendTo($('#layout').layout('panel','center'));
ns.layout({fit:true});
ns.layout('add', {
    region: 'center'
}).layout('add', {
    region: 'north',
    height: '30%',
    split: true
})

Title: Re: Create specialised layout using js scripts only
Post by: alastairwalker on December 03, 2015, 02:26:50 AM

I using the following script to evaluate your suggestion:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Basic Layout - jQuery EasyUI Demo</title>
   <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
   <link rel="stylesheet" type="text/css" href="../demo.css">
   <script type="text/javascript" src="../../jquery.min.js"></script>
   <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
   <script>
   $(document).ready(function ()
{
         $('#layout').layout('add', {
           region: 'east',
           width: '30%',
           split: true
         }).layout('add', {
           region: 'center'
         });
         var ns = $('<div></div>').appendTo($('#layout').layout('panel','center'));
         ns.layout({fit:true});
         ns.layout('add', {
           region: 'center'
         }).layout('add', {
           region: 'north',
           height: '30%',
           split: true
         });
   });
   </script>
</head>
<body>
<div id = "layout">
   <div style="margin:20px 0; "></div>
   <div class="easyui-layout" id = "inner" style="width:700px;height:300px;border:1px solid black;">
   </div>
</div>
</body>
</html>

As you will see if the script is run, the frame is quite empty.

Clearly, I must be missing something!

Any recommendations to move forward on this will be really appreciated!

Alastair

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: alastairwalker on November 30, 2015, 02:21:20 AM