Extjs tabpanel 的tab最大化有关问题研究
日期：2014-05-16 浏览次数：20405 次
Extjs tabpanel 的tab最大化问题研究
对于这个问题，是我在问答中看到的问题，咋看到的时候，就知道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>
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
