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,637
    Vote Rating
    400
    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,116
    Vote Rating
    507
    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,116
    Vote Rating
    507
    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!

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

      0  

    Default


    Quote Originally Posted by evant View Post
    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.

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,116
    Vote Rating
    507
    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


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar