Create specialised layout using js scripts only

EasyUI Forum

May 04, 2024, 06:34:05 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Create specialised layout using js scripts only

Pages: [1]

« previous next »

Author

Topic: Create specialised layout using js scripts only (Read 7081 times)

alastairwalker

Newbie

Posts: 14

Create specialised layout using js scripts only

« 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


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Create specialised layout using js scripts only

« Reply #1 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
})


	Logged

alastairwalker

Newbie

Posts: 14

Re: Create specialised layout using js scripts only

« Reply #2 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


	Logged

Pages: [1]

« previous next »