Threaded 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

Thread Participants: 2