Ext 4.1.0-gpl: tabpanel won't show chart without a height set

[dynamitedata]

I'm actually having this issue under 4.0.7 but can reproduce it using extjs example code from 4.1.0. I've been having to specify a height to get a chart to show in a tab, but that in turn causes a problem in that if the browser/viewport gets resized, the chart doesn't.

To see the issue in 4.1.0 I made very minor modifications to a couple of files in examples/tabs code:

• Refer to example-data.js at the top of tabs.html
• Replaced the second tab with the first chart from examples/charts/Charts.js
• Fiddled with layout: fit and height properties for the chart; the former seems to have no effect

Below are the diffs and screenshots a) when height is not specified and b) when height *is* specified

Also the following forum topics may or may not be on point:

http://www.sencha.com/forum/showthread.php?159758-TabPanel-won-t-show-content-without-a-height-set

http://www.sencha.com/forum/showthre...fusion-in-Tabs

diff -r examples/tabs/tabs.html examples_modified/tabs/tabs.html
8a9,10
>
> <script type="text/javascript" src="../example-data.js"></script>
diff -r examples/tabs/tabs.js examples_modified/tabs/tabs.js
17,18c17,79
< contentEl:'markup',
< title: 'Long Text'
---
> title: '1st Chart from examples/charts/Charts.js',
> xtype: 'chart',
> layout: 'fit',
> //height: 300,
> animate: false,
> store: store1,
> insetPadding: 30,
> axes: [{
> type: 'Numeric',
> minimum: 0,
> position: 'left',
> fields: ['data1'],
> title: false,
> grid: true,
> label: {
> renderer: Ext.util.Format.numberRenderer('0,0'),
> font: '10px Arial'
> }
> }, {
> type: 'Category',
> position: 'bottom',
> fields: ['name'],
> title: false,
> label: {
> font: '11px Arial',
> renderer: function(name) {
> return name.substr(0, 3) + ' 07';
> }
> }
> }],
> series: [{
> type: 'line',
> axis: 'left',
> xField: 'name',
> yField: 'data1',
> listeners: {
> itemmouseup: function(item) {
> Ext.example.msg('Item Selected', item.value[1] + ' visits on ' + Ext.Date.monthNames[item.value[0]]);
> }
> },
> tips: {
> trackMouse: true,
> width: 80,
> height: 40,
> renderer: function(storeItem, item) {
> this.setTitle(storeItem.get('name'));
> this.update(storeItem.get('data1'));
> }
> },
> style: {
> fill: '#38B8BF',
> stroke: '#38B8BF',
> 'stroke-width': 3
> },
> markerConfig: {
> type: 'circle',
> size: 4,
> radius: 4,
> 'stroke-width': 0,
> fill: '#38B8BF',
> stroke: '#38B8BF'
> }
> }]