PDA

View Full Version : Tab Panel - Why do tabs get resized.



pprabhu23
12 Jun 2012, 10:58 AM
I have a very simple tab.Panel widget.

Here is the config code for it. Dynamically I create tabs by getting the object and calling the add function on it. At the start there is one non-closeable tab present.


extend : 'Ext.tab.Panel',
alias : 'widget.tabPanelView',
cls: 'vt-tabpanelView',
enableTabScroll: true,
autoHeight : true,
minTabWidth : 55,
activeItem : 0,

The problem is when I start opening many tabs...the tab panel scroll appears...but appears late...it does not appear when there is no space to create any more tabs. once there is no more space left...the tab start to compress. After opening a couple of more extra tabs , the scroll arrows appear and the tabs do not compress anymore. Also after the tabs have been compressed and Is tart closing tabs, the compressed tabs do not expand out to the original size.

The images attached show all three states. Am I missing some obvious configuration? I did a bunch of experiments with the various config options on the tab.Panel and tab.Tab object. Also this doesnt appear to happen with the example extjs provides..but that is of course a much simpler setup.

friend
13 Jun 2012, 4:03 AM
Allowing a user to open that many tabs is probably not a good design decision. The more tabs you open, the harder it becomes to read the tab titles.

Instead, consider grouping related tabs into child tab panels. As an example:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mfg. Order Maintenance</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
frame: true,
html: 'Banner Text'
},{
xtype: 'panel',
region: 'west',
frame: true,
title: 'Menu',
width: 150
},{
xtype: 'tabpanel',
region: 'center',
items: [{
xtype: 'tabpanel',
title: 'Reports',
items: [{
xtype: 'panel',
title: 'Dashboard'
},{
xtype: 'panel',
title: 'Management'
},{
xtype: 'panel',
title: 'Classes'
}]
},{
xtype: 'tabpanel',
title: 'View',
items: [{
xtype: 'panel',
title: 'Users'
},{
xtype: 'panel',
title: 'Locations'
}]
}]
},{
xtype: 'panel',
region: 'south',
frame: true,
height: 34,
html: 'Footer Text'
}]
});
});
</script>
</head>

<body>

</body>
</html>

pprabhu23
13 Jun 2012, 4:59 AM
That is circumventing the actual problem. Business is not going to allow me to change that design. The scroll for the tabs is essentially designed to allow this. In all reality users probably will never open those many tabs..but that does not mean we do not account for it.

Any other ideas?

pprabhu23
13 Jun 2012, 10:09 AM
I think this is a bug. Basically after a lot of trial and error setting the property minTabWidth on the tab.Panel class causes this issues.

Taking that out makes the tab scroller work fine.

scottmartin
13 Jun 2012, 2:52 PM
Please try this with the latest release:
http://www.sencha.com/forum/showthread.php?219836-Ext-JS-4.1.1-RC2-Now-Available

If there is still a problem, please report a bug as described here: (in bugs forum)
http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug

Regards,
Scott.