Extjs tabpanel 的tab最大化问题研究

最新推荐文章于 2019-08-14 20:05:44 发布

chenhailong118

最新推荐文章于 2019-08-14 20:05:44 发布

阅读量239

点赞数

分类专栏： JspAndFaceWeb 文章标签： javascript ViewUI

JspAndFaceWeb 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

对于这个问题，是我在问答中看到的问题，咋看到的时候，就知道tab中，extjs仅仅实现了close的方法，对于tab能不能最大化

我调查了一下，发现不能，换个思维来说，tab的最大化是不是extjs认为是tabpanel的最大化，查看了官网的document API发现果真如此，认为最大化中window是实装好的，但对于panel来说是要自己做才行

我这里实装了一下，希望对有这样问题的人，一个想法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Example</title>
    <!-- Ext includes -->
    <link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-4.0.7-gpl/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
	Ext.onReady(function(){
		getTools=function(){
			return [{
				xtype: 'tool',
				type: 'maximize',
				handler: function(e, target, panelHeader, tool){
					var panel = panelHeader.ownerCt;
					panel.setHeight(500);
					panel.setWidth(800);
				}
				},{
				xtype: 'tool',
				type: 'minimize',
				handler: function(e, target, panelHeader, tool){
					var panel = panelHeader.ownerCt;
					panel.setHeight(250);
					panel.setWidth(600);
				}
				}];
		}
		var tabs2 = Ext.createWidget('tabpanel', {
			renderTo: document.body,
			activeTab: 0,
			width: 600,
			height: 250,
			title:'Test for the tabpanel max tooltip',
			activeTab: 0,
			closeAction:'destroy',
			closable:true,
			maximizable:true,
			minTabWidth:100,
			tools:getTools(),
			items: [{
				title: 'Tab 1',
				bodyPadding: 10,
				html : 'A simple tab',
				closable: true,
				tools: getTools()
			}, {
				title: 'Tab 2',
				html : 'Another one'
			}],
			margin:'50px'
		});
	});
</script>
</body>
</html>

Extjs 3.4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Example</title>
    <!-- Ext includes -->
    <link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
	<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-3.4.0/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
	Ext.onReady(function(){
		getTools=function(){
			return [{
				id: 'maximize',
				handler: function(e, target, panelHeader, tool){
					var panel = panelHeader.ownerCt;
					panel.setHeight(500);
					panel.setWidth(800);
				}
				},{
				id: 'minimize',
				handler: function(e, target, panelHeader, tool){
					var panel = panelHeader.ownerCt;
					panel.setHeight(250);
					panel.setWidth(600);
				}
				}];
		}
		var tabs2 = new Ext.TabPanel({
			renderTo: document.body,
			activeTab: 0,
			width: 600,
			height: 250,
			activeTab: 0,
			closeAction:'destroy',
			plain:true,
			minTabWidth:100,
			items: [{
				title: 'Tab 2',
				bodyPadding: 10,
				html : 'A simple tab',
				tools: getTools()
			}, {
				title: 'Tab 2',
				html : 'Another one'
			}],
			margin:'50px'
		});
	});
</script>
</body>
</html>