EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: [CLOSED] Chart ReRender after Panel Resize

  1. #1
    Premium Member
    Join Date
    Dec 2009
    Location
    Hazleton, PA
    Posts
    183

    [CLOSED] Chart ReRender after Panel Resize

    I know this is something you don't officially support, but I was hoping you might have an idea to help me out. I have this HighChart control (extends Ext.BoxComponent) that I'm working on and I have it set in the header (North Panel) of a viewport. In the listener of the panel I have created in the North layout I have after render loading the chart control, it works correctly and renders to the size of the panel. When the panel is resized however it doesn't resize the chart. I can click on reload, and it will re render the chart to the new correct size.

    I guess my question I need to re render this panel after a viewport resize. Any ideas I'm just a little lost..

    I'll post my code, any ideas? (BTW when I place it in a window it works correctly and as expected, it will always keep resizing to the window making me think i have to call that resize command which now slips my mind)

    Code:
    <script type="text/javascript">
        function panelLoaded() {
    
            var chart;
            var store2 = new Ext.data.JsonStore({
                fields: ['season', 'total'],
                data: [{
                    season: 'Summer',
                    total: 150
                }, {
                    season: 'Fall',
                    total: 245
                }, {
                    season: 'Winter',
                    total: 117
                }, {
                    season: 'Spring',
                    total: 184
                }]
            });
    
            chart = new Ext.ux.HighChart({
                store: store2,
                height: 325,
                series: [
                      {
                          type: 'pie',
                          name: 'Views',
                          categorieField: 'season',
                          dataField: 'total'
                      }
                  ],
                chartConfig: {
                    chart: {
                        margin: [50, 150, 60, 80]
                    },
                    title: {
                        text: 'Employees By Business Unit',
                        style: {
                            margin: '10px 100px 0 0' // center it
                        }
                    },
                    subtitle: {
                        text: 'Source: DeAngelo Brothers Inc',
                        style: {
                            margin: '0 100px 0 0' // center it
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '10px',
                            top: '100px'
                        }
                    }
                }
            });
    
    //              var graphWin = new Ext.Window({
    //                  title: 'Resizeable Graph Window',
    //                  resizeable: true,
    //                  width: 400,
    //                  height: 400,
    //                  layout: 'fit',
    //                  items: [chart]
    //              });
    //              graphWin.show();
            
            Chart1Panel.add(chart);
            Chart1Panel.doLayout();
           
    
        }
    </script>
    // NORTH Panel in viewport/borderlayout

    Code:
    <North Split="true">
        <ext:Panel runat="server" ID="Chart1Panel" Title="Test"  >
            <Listeners>
                <AfterRender Fn="panelLoaded" />
            </Listeners>
        </ext:Panel>
    </North>
    Attached Images Attached Images

  2. #2
    Ext.NET - Dev Team Vladimir's Avatar
    Join Date
    Mar 2008
    Location
    Russia
    Posts
    15,388

    RE: [CLOSED] Chart ReRender after Panel Resize

    Hi,

    What about to add Layout="Fit" to the Chart1Panel?
    Vladimir Shcheglov
    Ext.NET, Inc.
    Development Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Oct 2011
    Posts
    12
    Hello.

    I am trying to use the adapter for Highcharts in Ext.net but without success because I need to include the ext-all.js and ext-base.js to work.
    so far, no problem.

    but when I add the ResourceManager to the page, I get a conflict.

    Can anyone tell me if successfuly integrated Highcharts with Ext.net in ASP.net projects?

    thanks
    daniela

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Member
    Join Date
    Oct 2011
    Posts
    12
    Thanks for the reply. I already read that post and in fact i am using the ExtJS adapter for HighCharts.

    I have the code below as an ASP.net but when running it I get the following error: Error: Unable to get value of the property 'ext-gen2': object is null or undefined


    test.txt

    Any hint?

    thanks

  6. #6
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    Can you just post this code here wrapping in code tags?
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  7. #7
    Member
    Join Date
    Oct 2011
    Posts
    12
    Here it is:

    Code:
    <head runat="server">
        <title></title>
    
        <script type="text/javascript" src="js/ext-base.js"></script>
    
        <script type="text/javascript" src="js/ext-all.js"></script>
    
        <script type="text/javascript" src="js/adapter-extjs.js"></script>
    
        <script type="text/javascript" src="js/highcharts.src.js"></script>
    
        <script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>
    
        <script type="text/javascript">
            var store2 = new Ext.data.JsonReader({
                fields: ['season', 'total'],
                data: [{
                    season: 'Summer',
                    total: 150
                }, {
                    season: 'Fall',
                    total: 245
                }, {
                    season: 'Winter',
                    total: 117
                }, {
                    season: 'Spring',
                    total: 184
    }]
                });
    
                var chart = new Ext.ux.HighChart({
                    store: store2,
                    height: 325,
                    series: [{
                        type: 'pie',
                        name: 'Views',
                        categorieField: 'season',
                        dataField: 'total'
    }],
                        chartConfig: {
                            chart: {
                                margin: [50, 150, 60, 80]
                            },
                            title: {
                                text: 'Employees By Business Unit',
                                style: {
                                    margin: '10px 100px 0 0' // center it
                                }
                            }
                        }
                    });
                    
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <ext:Panel ID="Chart1Panel" runat="server" Title="Personal Data & Chart Settings"
                Collapsible="true" Collapsed="false">
                <Content>
                </Content>
                <Listeners>
                    <AfterRender Fn="panelLoaded" />
                </Listeners>
            </ext:Panel>
            <div id="container">
            </div>
        </div>
        </form>
    </body>
    </html>

  8. #8
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    At the first of all why do you add these scripts manually?
    Code:
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="js/adapter-extjs.js"></script>
    I guess to avoid "Ext is undefined" error?

    I should say that these scrips are loaded automatically.

    Please just use
    Code:
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    before Ext using.

    So, the <head> can look this way:
    Code:
    <head runat="server">
        <title>Ext.Net Example</title>
     
        <script type="text/javascript" src="js/highcharts.src.js"></script>
     
        <script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
     
        <script type="text/javascript">
            var store2 = new Ext.data.JsonReader({
            //rest part
                     
         </script>
     
    </head>
    And where can I download "highcharts.src.js" and "Ext.ux.HighChart.js"?
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  9. #9
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,075
    I have had "highcharts.js" already:
    Code:
    Highcharts JS v2.1.4 (2011-03-02)
    Do you use the same one?

    Ext.ux.HighChart.js is the adapter to use with ExtJS, right?

    Can you give a link to download?
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  10. #10

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 3:12 PM
  2. [CLOSED] Problem to draw a chart into a panel
    By feanor91 in forum 2.x Premium Help
    Replies: 5
    Last Post: May 23, 2012, 12:01 PM
  3. TreeGrid : Header Layout ReRender
    By itali in forum 1.x Help
    Replies: 0
    Last Post: Feb 08, 2011, 7:05 PM
  4. Auto Resize Panel in ViewPort on client-side Panel.AutoLoad
    By randy85253 in forum 1.x Premium Help
    Replies: 13
    Last Post: Dec 03, 2008, 4:27 PM
  5. Replies: 4
    Last Post: Nov 19, 2008, 1:13 AM

Tags for this Thread

Posting Permissions