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'
> }
> }]

[scottmartin]

What is the layout of your parent container? How are you displaying the chart?

var chart = Ext.create('Ext.chart.Chart', {

    //width: 500,
    //height: 300,

    animate: true,
    store: store,
    ....
});

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 500,
    height: 300,
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: [ chart ]
});

Regards,
Scott.

[dynamitedata]

What is the layout of your parent container? How are you displaying the chart?

var chart = Ext.create('Ext.chart.Chart', {

    //width: 500,
    //height: 300,

    animate: true,
    store: store,
    ....
});

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 500,
    height: 300,
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: [ chart ]
});

Regards,
Scott.

Just refer to the files directly out of the examples directory.

[evant]

Not really clear on how to reproduce the problem:

Ext.require('*');

Ext.onReady(function() {

    Ext.create('Ext.tab.Panel', {
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            title: 'Tab 1',
            html: 'Foo'
        }, {
            xtype: 'chart',
            title: 'Tab 2',
            store: {
                fields: ['name', 'value'],
                data: [{
                    name: 'A',
                    value: 1
                }, {
                    name: 'B',
                    value: 2
                }]
            },
            theme: 'Category1',
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['value'],
                title: 'Number of Hits'
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year'
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'name',
                yField: 'value'
            }]
        }]
    });

});

[dynamitedata]

I don't see how I couldn't have been more clear as to how to reproduce the issue. Just make the same exact modifications to the code in the distro's examples/tabs folders as I did.

[evant]

Is there anything wrong with the code I posted? I tried to follow what you suggested.