Print Page - Stacked panels in json rendered layout

Title: Stacked panels in json rendered layout
Post by: WizPS on August 29, 2022, 04:03:54 PM

Hello,

In this example I use JSON rendering a layout where expected outcome is tree stacked panels (Panel1,Panel2,Panel3) in the "center" layout like so:

https://jsfiddle.net/wqdLef8r/#&togetherjs=HeSQ1cLuLE (https://jsfiddle.net/wqdLef8r/#&togetherjs=HeSQ1cLuLE)

Code:

However only the last panel is getting rendered. Please advise how can I get these panels stacked on top of each other?

Many thanks for your help!

Title: Re: Stacked panels in json rendered layout
Post by: jarry on August 31, 2022, 02:05:08 AM

Please look at this code.

Code:

Title: Re: Stacked panels in json rendered layout
Post by: WizPS on August 31, 2022, 08:35:53 AM

Hi Jarry,

That code produces the stacked panels however panel content can't be rendered. Recursion by main(o, c) is left out.

In this example there's an added propertygrid to each of the tree panels. Expected outcome is three stacked panels containing a property grid each like so:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);

if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div>').appendTo(p);
main(o, c);
} else if (opts.plugin == 'panel') {
var p = $('<div></div>').appendTo($element);
p.panel(o);
} else {
main(o, c);
}

// main(o, c);

// $element[opts.plugin]()

});
}
return $element;
}

})(jQuery);

var data = { "total": 7, "rows": [{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" }, { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" }, { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" }, { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" }, { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" }, { "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": { "type": "validatebox", "options": { "validType": "email" } } }, { "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": { "type": "checkbox", "options": { "on": true, "off": false } } }] }

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200, plugin:'propertygrid', plugincontent: { data: data }},
{ title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});

</script>
</body>
</html>

Please propose how to render also the propertygrid into the panels.

Thanks' in advance for help!

Title: Re: Stacked panels in json rendered layout
Post by: jarry on August 31, 2022, 11:40:49 PM

This code works fine.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);

if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div>').appendTo(p);
} else if (opts.plugin == 'panel') {
var c = $('<div></div>').appendTo($element);
c.panel(o);
}

main(o, c);

// $element[opts.plugin]()

});
}
return $element;
}

})(jQuery);

var data = { "total": 7, "rows": [{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" }, { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" }, { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" }, { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" }, { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" }, { "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": { "type": "validatebox", "options": { "validType": "email" } } }, { "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": { "type": "checkbox", "options": { "on": true, "off": false } } }] }

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200, plugin:'propertygrid', plugincontent: { data: data }},
{ title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});

</script>
</body>
</html>

Title: Re: Stacked panels in json rendered layout
Post by: WizPS on September 02, 2022, 02:40:03 PM

Hi Jarry,

When resizing the browser window, propertygrid should follow and currently id does not. When adding fit:true something odd happens to the height of the panels. Please have a look at the following code example:

https://jsfiddle.net/47qjuvcx/1/ (https://jsfiddle.net/47qjuvcx/1/)

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);

if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div>').appendTo(p);
} else if (opts.plugin == 'panel') {
var c = $('<div></div>').appendTo($element);
c.panel(o);
}

main(o, c);

// $element[opts.plugin]()

});
}
return $element;
}

})(jQuery);

var data = { "total": 7, "rows": [{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" }, { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" }, { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" }, { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" }, { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" }, { "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": { "type": "validatebox", "options": { "validType": "email" } } }, { "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": { "type": "checkbox", "options": { "on": true, "off": false } } }] }

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ fit: true , title: 'Panel1', width: '100%', height: 200, plugin: 'propertygrid', plugincontent: { data: data } },
{ fit: true, title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ fit: true, title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});

</script>
</body>
</html>

Please advice how to get the panel and property grid to follow the browser with.

Many thanks in advance!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: WizPS on August 29, 2022, 04:03:54 PM