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.

[dynamitedata]

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

Sorry I did not respond sooner, am busy writing my application and came up with a work-around. So I did *not* try what you suggested in the context of my application. But if you follow the steps I've suggested, using Ext's very own example code, you can duplicate the issue I'd been experiencing in my application.

Perhaps I could send a patch file, where the diff output is a little cleaner. Or zip some files and attach. But as noted at the very top in my original post in the second point what I did in essence was "Replaced the second tab (of examples/tabs/tabs.js) with the first chart from examples/charts/Charts.js", and the result is demonstrated in the screenshots I attached.

[evant]

If it's simple, not sure why you didn't just paste the code you used to duplicate it, from your description there's still ambiguity, which is why I was trying to post code.

The sample I posted above is the same as the example. It's a tab panel, with a chart inside an inactive panel and it runs correctly for me.