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

      0  

    Default MVC - redering chart to DIV

    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
    romerve is on a distinguished road

      0  

    Default


    Any ideas??

    Thanks

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Vote Rating
    13
    flanders will become famous soon enough

      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

Thread Participants: 1