EasyUI Forum
May 07, 2024, 05:31:23 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > How to minimize the Window into a new tab
Pages: [1]
« previous next »
  Print  
Author Topic: How to minimize the Window into a new tab  (Read 4261 times)
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« 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?

Code:
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);
                                 
                                 

                                }
« Last Edit: December 15, 2021, 12:18:43 PM by poeziafree » Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: December 15, 2021, 08:38:15 PM »
Please refer to the code below:
Code:
$('#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');
	}
})
Logged
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« Reply #2 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
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #3 on: March 27, 2022, 04:47:42 PM »
Please look at this example. It works fine.
Code:
<!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>
Logged
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« Reply #4 on: April 11, 2022, 10:53:13 AM »
Defining the column width fixed the problem.

Thanks for the help!
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!