|
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<!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 p = $element[opts.plugin](o);
}
main(o, c);
$element[opts.plugin]()
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200 },
{ title: 'Panel2', width: '100%', height: 150 },
{ title: 'Panel3', width: '100%', height: 150 }
]
}]
});
</script>
</body>
</html> 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! |
|
|
|
« Last Edit: August 29, 2022, 04:06:36 PM by WizPS »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #1 on: August 31, 2022, 02:05:08 AM » |
|
Please look at this 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);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200 },
{ title: 'Panel2', width: '100%', height: 150 },
{ title: 'Panel3', width: '100%', height: 150 }
]
}]
});
</script>
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
|
WizPS
|
|
« Reply #2 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: <!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! |
|
|
|
« Last Edit: August 31, 2022, 08:39:43 AM by WizPS »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #3 on: August 31, 2022, 11:40:49 PM » |
|
This code works fine. <!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>
|
|
|
|
|
Logged
|
|
|
|
|
WizPS
|
|
« Reply #4 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/<!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! |
|
|
|
« Last Edit: September 02, 2022, 02:45:34 PM by WizPS »
|
Logged
|
|
|
|
|
