Results 1 to 3 of 3

Thread: MVC - redering chart to DIV

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
      0  

    Default MVC - redering chart to DIV

    Hello,

    I'm having difficulties rending a chart to a DIV. I am new ExtJS 4 so i am sure i am doing something wrong.

    Here is what i got:
    app.js
    Code:
    Ext.Loader.setConfig({enabled:true});
    
    
    var siteAppPath = 'http://localhost/analytics/public/js/analytics/app';
    
    
    Ext.application({
        name: 'Analytics',
        appFolder: siteAppPath,
        controllers: ['Reporter'],
        
        launch: function() {
            console.log('app');
            
            var d = Ext.getCmp('cio');
            console.log(d);
        }
        
    });
    controller/reporter.js
    Code:
    Ext.define('Analytics.controller.Reporter', {
        extend: 'Ext.app.Controller',
        
        views: ['Reporter'],
        
        init: function() {
            console.log('controller');
        }
    });
    view/reporter.js:
    Code:
    Ext.define('Analytics.view.Reporter', {
        extend: 'Ext.chart.Chart',
        alias: 'widget.graphio',
                    
        initComponent: function() {
            this.id = 'cio',
            
            this.renderTo = 'chart-io',
            this.width = 400,
            this.height = 300,
            this.autoShow = true,
            
            this.axes = [
                {
                    title: 'Temperature',
                    type: 'Numeric',
                    position: 'left',
                    fields: ['temperature'],
                    minimum: 0,
                    maximum: 100
                },
                {
                    title: 'Time',
                    type: 'Time',
                    position: 'bottom',
                    fields: ['date'],
                    dateFormat: 'ga'
                }
            ];
            
            this.store = {
                fields: ['temperature', 'date'],
                data: [
                    { temperature: 58, date: new Date(2011, 1, 1, 8) },
                    { temperature: 63, date: new Date(2011, 1, 1, 9) },
                    { temperature: 73, date: new Date(2011, 1, 1, 10) },
                    { temperature: 78, date: new Date(2011, 1, 1, 11) },
                    { temperature: 81, date: new Date(2011, 1, 1, 12) }
                ]
            };
            
        }
    });
    When the page loads, i can see the console logs, but i cant do any Ext.getCmp so i am not sure how to show the chart.

    Maybe it is not even possible to render to a DIV..?

    Any help is appreciated.

    Thanks

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Vote Rating
    0
      0  

    Default

    Any ideas??

    Thanks

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Vote Rating
    14
      0  

    Default

    Youre application and controller are automatically instantiated (as Singletons) and therefore the console.logs are executed. However you do never instantiate the view, which is the reason you don't see it or can access it

Posting Permissions

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