Title: How to minimize the Window into a new tab
Post by: poeziafree on December 15, 2021, 12:16:19 PM
Hello, I need to minimize a window into a new tab. Namely, on clicking the minimize button of the window, I need the content of the window to be inserted in the newly created tab, copying the title of the window and setting it to the tab title. I have tried the following, but it doesn't seem to be perfect. Any suggestions? onMinimize: function() {
var birthday = $('#windowPopUp').find('#birthday').datebox('getValue');
var city = $('#windowPopUp').find('#city').combobox('getValue');
var office = $('#windowPopUp').find('#office').combobox('getValue');
var department = $('#windowPopUp').find('#department').combobox('getValue');
var contents = $('#windowPopUp').contents();
var id = 'create-operator';
var title = '<uniqueID>' + id + '<\/uniqueID> მომხმარებლის შექმნა';
var tabPanel = $('#wu-tabs');
if (tabPanel.tabs('exists', title)) {
tabPanel.tabs('select', title);
return false;
}
tabPanel.tabs('add', {
id: id,
title: title,
content: contents,
fit: true,
cls: 'pd3',
closable: true
});
$('#'+id).find('#birthday').datebox('setValue', birthday);
$('#'+id).find('#office').combobox('setValue', office);
$('#'+id).find('#department').combobox('setValue', department);
$('#'+id).find('#city').combobox('setValue', city);
}
Title: Re: How to minimize the Window into a new tab
Post by: jarry on December 15, 2021, 08:38:15 PM
Please refer to the code below: $('#wu-tabs').tabs({
onBeforeClose: function(title){
var win = $('#windowPopUp').window('window');
$('#windowPopUp').appendTo(win).window('open');
}
})
$('#windowPopUp').window({
onMinimize: function(){
var title = 'მომხმარებლის შექმნა';
var tabPanel = $('#wu-tabs');
tabPanel.tabs('add', {
title: title,
content: '<div id="tabs-window" style="position:relative;width:100%;height:100%;overflow:auto"></div>',
fit: true,
closable: true
})
$('#windowPopUp').appendTo('#tabs-window');
}
})
Title: Re: How to minimize the Window into a new tab
Post by: poeziafree on March 26, 2022, 11:47:38 PM
Hello Jarry and thank you!
If the Window contain datagrid, on minimizing the window and appending its content to the tab causes the shrinking of datagrid columns.
Any way out available?
Thanks
Title: Re: How to minimize the Window into a new tab
Post by: jarry on March 27, 2022, 04:47:42 PM
Please look at this example. It works fine. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tabs - 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/themes/icon.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>
<script type="text/javascript">
$(function(){
$('#wu-tabs').tabs({
onBeforeClose: function(title){
$('#windowPopUp-content').appendTo('#windowPopUp');
$('#windowPopUp').window('open').window('resize');
}
})
$('#windowPopUp').window({
onMinimize: function(){
var title = 'მომხმარებლის შექმნა';
var tabPanel = $('#wu-tabs');
tabPanel.tabs('add', {
title: title,
content: '<div id="tabs-window" style="position:relative;width:100%;height:100%;overflow:auto"></div>',
fit: true,
closable: true
})
$('#windowPopUp-content').appendTo('#tabs-window');
$('#wu-tabs').tabs('resize')
}
})
})
var data = {"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
]}
</script>
</head>
<body>
<div id="wu-tabs" style="width:700px;height:400px">
<div title="Base" style="padding:10px">
<p>Base Content.</p>
</div>
</div>
<div id="windowPopUp" title="The Title" style="width:700px;height:400px">
<div id="windowPopUp-content" style="width:100%;height:100%">
<table class="easyui-datagrid" title="Basic DataGrid"
data-options="singleSelect:true,collapsible:true,data:data,fit:true,border:false">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
Title: Re: How to minimize the Window into a new tab
Post by: poeziafree on April 11, 2022, 10:53:13 AM
Defining the column width fixed the problem.
Thanks for the help!
|