1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    mahesh_chavan is on a distinguished road

      0  

    Default How to render Extjs 4 charts into the ExtJs 3 panel .

    How to render Extjs 4 charts into the ExtJs 3 panel .


    Hi All,

    can anybody tell me how to render an ExtJs4 chart into the existing application which is developed using ExtJs 3 library?

  2. #2
    Sencha - Management Team abe.elias's Avatar
    Join Date
    Aug 2008
    Location
    Palo Alto, CA
    Posts
    406
    Vote Rating
    4
    abe.elias is on a distinguished road

      0  

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    mahesh_chavan is on a distinguished road

      0  

    Default


    Hi Abie,

    Thanks for sharing the link . I have already seen this example in which they have created a window
    containing one panel which holds all your charts. However my requirement is to display chart directly into the panel. I have tired with rendering a chart into the window it works fine.

    However when i have tired it with the panel it did not work out .is there any difference in rendering the components in ExtJs 3 and ExtJs4 ? please find below my code

    var chart = Ext4.create('Ext.chart.Chart', {
    width: 400,
    height: 400,
    animation:true,
    store: chartStore,
    axes: [
    {
    title: 'x',
    type: 'Numeric',
    position: 'bottom',
    fields: ['xValue']
    },
    {
    title: 'y',
    type: 'Numeric',
    position: 'left',
    fields: ['yValue']
    }
    ],
    series: [
    {
    type: 'line',
    xField: 'xValue',
    yField: 'yValue'
    }
    ]
    });


    var ext3Panel = new Ext.Panel({

    title:'Chart in Extjs 3',
    layout:'fit',
    renderTo:Ext.getBody(),
    id:'ext3Panel',
    height:400,
    width:600,
    items:[chart]
    });

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    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


    ExtSJ4 is new, different.

    You are asking how to slam a new version of code into a older version.
    When you buy car parts, do you buy that part that was made for another year and expect it to work?

    I would suggest you:
    -Use what is provided in ExtJS3
    -Use a 3rd party that will work with ExtJS3 (ex: Highcharts)
    -Use ExtJS4 and then use the charts.

    Regards,
    Scott.

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    mahesh_chavan is on a distinguished road

      0  

    Default


    Hi Scott,

    Thanks for the suggestion. I am new to ExtJs 4. I am really impressed by the look and feel of the ExtJs 4.x charts and also a good thing about ExtJs 4 is with sandboxing feature you can use Ext JS 4 packages and components in an existing Ext JS 3.x application. Now just imagine if there is an application which is already developed using ExtJs 3.x and if you want to use new features of ExtJs 4.x then there is no point in migrating your whole application from ExtJs 3.x to ExtJs 4.x.

    Is there any difference in rendering ExtJs 3.x and ExtJs 4.x components ?

    Regards,
    Mahesh.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    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


    I have not actually tried to use ExtJS4 charts in ExtJS3 apps. I have read several other posts where much time is spent trying to squeeze it in.

    I use Hightcharts (HC) in in my ExtJS3 apps. There is a extension that works just fine and it loads without problems.

    The other problem with ExtJS4 Charts is that it does not support printing/exporting (HC does) at this time. It makes it a bit of a 'toy' until it is supported.

    Regards,
    Scott.

  7. #7
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

    Default


    Maybe it will be helpfull to you to use just raphael
    http://raphaeljs.com/.
    Cause ExtJS 4 charts is on base of Raphael.
    Look at this. I did map of Russia in ExtJS 3 + Raphael
    http://vreshenie.ru/work/svg/map/15.html