1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    55
    Answers
    3
    Vote Rating
    0
    brokentwig is on a distinguished road

      0  

    Default Answered: Chart in MVC view

    Answered: Chart in MVC view


    I've created a view that extends the chart class. ext-all-debug throws all sorts of errors in Firebug. I'm hoping someone out there has got this to work and I'm just missing something. I basically just copied the example from Sencha and turned it into a view.

    Code:
    Ext.define('MyIpSys.view.content.IpCampusChartView' ,{
        extend: 'Ext.chart.Chart',
        alias : 'widget.ipcampuschartview',
    
        width: 800,
        height: 600,
        animate: true,
        store: 'IpCampusChartStore',
        theme: 'White',
        axes: [{
            type: 'Category',
            position: 'left',
            fields: ['campus_name'],
            title: 'Campus Name'
        },{
            type: 'Numeric',
            position: 'bottom',
            fields: ['network_count'],
            title: 'Number of Networks',
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
        }],
        //Add Bar series.
        series: [{
            type: 'bar',
            axis: 'bottom',
            xField: 'campus_name',
            yField: 'network_count',
            highlight: true,
            label: {
               display: 'insideEnd',
                field: 'network_count',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
               'text-anchor': 'middle'
            }
        }],
        
        initComponent: function() {
        
            this.callParent(arguments);
        }
    });
    The error Firebug throws is :

    me.label.renderer is not a function, and directs me to line 43123:
    Code:
            for (i = 0; i < last; i++) {
                point = inflections[i];
                text = me.label.renderer(labels[i]);
                textLabel = me.getOrCreateLabel(i, text);
                bbox = textLabel._bbox;
    I can change this line to:
    text = String(labels[i]).match(/\d+\.\d{1,}/)?Ext.Number.toFixed(labels[i],1):labels[i];
    and the loading moves on.

    Then I just get a list of style errors. The first one I get is:

    seriesStyle is undefined (line 47303)

    Code:
    if (!store || !store.getCount()) {             return; 
            } 
             
            delete seriesStyle.fill; 
    
            endSeriesStyle = Ext.apply(seriesStyle, this.style); 
            me.unHighlightItem(); 
    
            me.cleanHighlights();
    If I comment this line out, the errors just continue. The errors seem to revolve around the seriesStyle, although no examples show me having to declare a default style. What could I be missing?

  2. Can you post a standalone example to debug? I just plugged this into an existing MVC application of mine and it worked fine. I did make a couple of changes:

    1. I didn't have the "White" theme you have defined so I commented that out
    2. In my Applications.js file I added 'Ext.chart.*' to the 'requires' array config
    3. You didn't post what your IpCampusChartStore looked like so I had to create my own
    4. In my controller file I added the IpCampusChartStore to the 'stores' array config

    Here's what my store looked like:
    Code:
    Ext.define('MyIpSys.store.IpCampusChartStore', {
    
        extend : 'Ext.data.Store',
        fields : ['campus_name', 'network_count'],
        data   : [
            { campus_name: 'campus name 1', network_count: 10 },
            { campus_name: 'campus name 2', network_count: 22 },
            { campus_name: 'campus name 3', network_count: 33 },
            { campus_name: 'campus name 4', network_count: 44 },
            { campus_name: 'campus name 5', network_count: 21 },
            { campus_name: 'campus name 6', network_count: 55 },
            { campus_name: 'campus name 7', network_count: 34 },
            { campus_name: 'campus name 8', network_count: 15 },
            { campus_name: 'campus name 9', network_count: 59 }
        ]
    
    });
    So maybe you just need to do # 2 and add 'Ext.chart.*' to the requires config in your Applications.js file?

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    55
    Answers
    3
    Vote Rating
    0
    brokentwig is on a distinguished road

      0  

    Default


    bump

  4. #3
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,107
    Answers
    12
    Vote Rating
    3
    jratcliff is on a distinguished road

      0  

    Default


    Can you post a standalone example to debug? I just plugged this into an existing MVC application of mine and it worked fine. I did make a couple of changes:

    1. I didn't have the "White" theme you have defined so I commented that out
    2. In my Applications.js file I added 'Ext.chart.*' to the 'requires' array config
    3. You didn't post what your IpCampusChartStore looked like so I had to create my own
    4. In my controller file I added the IpCampusChartStore to the 'stores' array config

    Here's what my store looked like:
    Code:
    Ext.define('MyIpSys.store.IpCampusChartStore', {
    
        extend : 'Ext.data.Store',
        fields : ['campus_name', 'network_count'],
        data   : [
            { campus_name: 'campus name 1', network_count: 10 },
            { campus_name: 'campus name 2', network_count: 22 },
            { campus_name: 'campus name 3', network_count: 33 },
            { campus_name: 'campus name 4', network_count: 44 },
            { campus_name: 'campus name 5', network_count: 21 },
            { campus_name: 'campus name 6', network_count: 55 },
            { campus_name: 'campus name 7', network_count: 34 },
            { campus_name: 'campus name 8', network_count: 15 },
            { campus_name: 'campus name 9', network_count: 59 }
        ]
    
    });
    So maybe you just need to do # 2 and add 'Ext.chart.*' to the requires config in your Applications.js file?
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    http://www.sencha.com/forum/showthre...o-report-a-bug

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    55
    Answers
    3
    Vote Rating
    0
    brokentwig is on a distinguished road

      0  

    Default


    Thanks jratcliff, it was just the theme declaration. I was working off an example and I thought that theme was built in, or at least requiring theme.base and theme.Theme in app.js was handling it. I was already requiring the chart.* in app, and the store and controllers were good. Thanks for taking a look at it, sometimes you just need someone who knows what they are doing to put some eyes on your code.

  6. #5
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,107
    Answers
    12
    Vote Rating
    3
    jratcliff is on a distinguished road

      0  

    Default


    Great! Glad to hear you got it working then.
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    http://www.sencha.com/forum/showthre...o-report-a-bug

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar