Title: How to create a dynamic layout
Post by: TampaBay55 on February 27, 2015, 12:21:10 PM
Using jQuery and EasyUI, I would like to know how to dynamically create a layout. The following is my attempt; however is doesn't appear to work: <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CTest Site</title>
<link rel="stylesheet" type="text/css" href="app/lib/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="app/lib/jquery-easyui/themes/icon.css">
<script data-main="app/app" src="app/lib/require-js/require.js"></script>
</head>
<body></body>
</html>
My app.js requirejs.config({
"baseUrl": "app/lib",
"paths": {
"app": "/app",
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min",
"easyui": "jquery-easyui/jquery.easyui.min"
}
});
define(["jquery"], function($){
require(["easyui"],function(){
require(["app/views/viewport"],function(){
});
});
});
My viewport.js //Layout the page
$('body').addClass("easyui-layout");
$('body').append("<div id='spa-head' data-options=\"region:'north'\"></div>");
$('body').append("<div id='spa-west' data-options=\"region:'west',width:300,split:true\"></div>");
$('body').append("<div id='spa-cntr' data-options=\"region:'center',title:'CENTER'\"></div>");
The page should have rendered a layout with regions for north, west and center. The center panel would have been titled and the west panel would have had a resizable splitter. Instead, the page was blank even though I could see the proper elements rendered in the console.
Title: Re: How to create a dynamic layout
Post by: stworthy on February 28, 2015, 12:29:04 AM
Please try the code below instead. $('body').layout();
$('body').layout('add', {
region:'center',
title:'CENTER',
id:'spa-cntr'
}).layout('add', {
region:'north',
height:60,
id:'spa-head'
}).layout('add', {
region:'west',
width:300,
split:true,
id:'spa-west'
})
|