Hybrid View

    Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    16
    Vote Rating
    0
    dynamitedata is on a distinguished road

      0  

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

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


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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    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.

  3. #3
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    16
    Vote Rating
    0
    dynamitedata is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    What is the layout of your parent container? How are you displaying the chart?

    Code:
    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.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,664
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not really clear on how to reproduce the problem:

    Code:
    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'
                }]
            }]
        });
    
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    16
    Vote Rating
    0
    dynamitedata is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,664
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Is there anything wrong with the code I posted? I tried to follow what you suggested.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2