Results 1 to 8 of 8

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

Threaded View

Previous Post Previous Post   Next Post Next Post
    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
      0  

    Default 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 Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •