1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    14
    Vote Rating
    0
    tinabucur is on a distinguished road

      0  

    Default Chart not resized to Parent container

    Chart not resized to Parent container


    I want to render a line chart as a panel item. Because I want to use only the chart part from Extjs 4 , the panel containing the chart is an Ext js 3 one. I followed the indications from this blog entry :
    http://www.sencha.com/blog/integrati...C81yxQJbEuE%3D

    The problem is that I can not make the chart to automatically resize to the panel dimensions...I always have to set a fixed width and height and this is not what I want. Any ideas to this issue?

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    set the panel's layout to "fit"

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    14
    Vote Rating
    0
    tinabucur is on a distinguished road

      0  

    Default


    Already tried that but without success . The div containing the chart draw surface is still very small.
    This is how I tried :
    container panel configuration
    Code:
     {
                    xtype: 'container',
                    id:'myPanel',
                    title: 'Curves',
                    autoScroll:true,
                    region:'north',
                    height:450,
                    layout :'fit',
                   listeners: {
                       afterrender: function() {
                         Ext4.createWidget('chart', Ext.apply(this.getChartCfg(), {
                         renderTo: this.getEl().dom }));
                       }
                   }
    The config object for the chart is :
    Code:
    var configChart = {
        layout : 'fit',
        animate: false,
        resizable:true,
        store: storeT,
    //    height:450,
    //    width:1250,
        legend :false,
        autoScroll:true,
        shadow: true,
        theme: 'Category2',
       
        axes: [{
            type: 'Numeric',
            minimum: 0,
            maximum: 10,
            majorUnit:1,
            minorUnit : 1,
            adjustMinimumByMajorUnit:0,
            scale:'linear',
            position: 'left',
            fields: ['person','task'],
            title: 'Persons',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['time'],
            title: 'Time in day'
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'time',
            yField: 'person',
            markerCfg: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }}]
      
    }

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    looks like overnesting and it's not needed. I always created a window with one item xtype="chart", and resizing was never a problem. Also with nativ draw panel, which is used for charts.

    As soon you nest panels / containers, you have no guarantee for automatic resizing.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha User
    Join Date
    Oct 2009
    Location
    italy
    Posts
    1
    Vote Rating
    0
    polaretto is on a distinguished road

      0  

    Default


    Quote Originally Posted by tinabucur View Post
    Code:
     {
                    xtype: 'container',
                    id:'myPanel',
                    title: 'Curves',
                    autoScroll:true,
                    region:'north',
                    height:450,
                    layout :'fit',
                   listeners: {
                       afterrender: function() {
                         Ext4.createWidget('chart', Ext.apply(this.getChartCfg(), {
                         renderTo: this.getEl().dom }));
                       }
                   }
    Why creating the chart in the afterrender event handler? Why not simply add it as container's item property, like this:
    Code:
    {
        xtype: 'container',
        //...
        items: chartCfg
    }
    In this way you're sure that the lazy rendering process will size and position the component according to the parent's layout. No need to specify any renderTo config in this case.

    Also, you don't need a getter to access the config object (unless it's private), just reference it directly. This is a kind of mistake I've seen more than once: stop doing it the Java way, for JS sake!

Similar Threads

  1. Replies: 3
    Last Post: 27 Feb 2011, 3:30 PM
  2. Replies: 4
    Last Post: 29 Jul 2009, 9:46 AM
  3. Replies: 3
    Last Post: 2 Mar 2009, 3:17 AM
  4. Replies: 11
    Last Post: 19 Aug 2008, 6:26 AM

Thread Participants: 3