Results 1 to 8 of 8

Thread: how to call a listener of view from controller in Extjs

  1. #1

    Default how to call a listener of view from controller in Extjs

    i have a bar chart in my view where i have a listener which is retrieving the bar column items ,now i have to call that listener from controller here is my code ...

    This is the listener in my view..


    listeners: { itemmousedown: function (obj) { alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']); }},and i have to call this listener from my controller.here is my code..
    init: function () { this.control({ 'barColumnChart': { //this is the id of the bar chart in my View click: function () { } } });},

  2. #2
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    50
    Answers
    4

    Default

    Jeet,

    You can fire a event on view object. Please try with the below code

    Code:
    listeners: {
        itemmousedown: function (obj) {
            alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
        }
    },
    
    
    init: function () {
        this.control({
            'barColumnChart': { 
              click: function () {
                var viewCmp = Ext.getCmp('barColumnChart');
                viewCmp.fireEvent('itemmousedown');ss
              }
            }
        });},

  3. #3

    Default

    Ext.define('Gamma.controller.ControlFile', {

    extend : 'Ext.app.Controller',

    //define the stores
    stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
    //define the models
    models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
    //define the views
    views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],


    listeners: {
    itemmousedown: function (obj) {
    alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
    }
    },
    init: function () {
    this.control({
    'barColumnChart': {
    click: function () {
    var viewCmp = Ext.getCmp('barColumnChart');
    viewCmp.fireEvent('itemmousedown');
    }
    }
    });}


    }); i am doing this but not getting result

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    50
    Answers
    4

    Default

    I am not sure, i understood your question properly.
    You want to call an event on bar chart to execute itemmousedown handler code?

  5. #5

    Default

    Yes, i have a barcolumn chart in my application, now i have to catch the value of the bar with the help of click event .each click will show the value of the bar in an alert. Now i have the bar in my view ,and i have to call the click event from my controller so here is my code in the view ..

    var baseColor = 'rgb(0,0,0)';


    var colors = ['url(#v-1)',
    'url(#v-2)',
    'url(#v-3)',
    'url(#v-4)',
    'url(#v-5)'];


    Ext.define('Ext.chart.theme.Fancy', {
    extend: 'Ext.chart.theme.Base',

    constructor: function(config) {
    this.callParent([Ext.apply({
    axis: {
    fill: baseColor,
    stroke: baseColor
    },
    axisLabelLeft: {
    fill: baseColor
    },
    axisLabelBottom: {
    fill: baseColor
    },
    axisTitleLeft: {
    fill: baseColor
    },
    axisTitleBottom: {
    fill: baseColor
    },
    colors: colors
    }, config)]);
    }
    });


    var bar=Ext.define('Gamma.view.BarColumnChart', {
    extend : 'Ext.chart.Chart',
    alias : 'widget.barColumnChart',
    title:'barChart',
    height:300,
    width:Ext.getBody().getViewSize().width*0.6,
    id:'barColumnChart',
    xtype : 'chart',
    theme : 'Fancy',
    animate : {
    easing : 'bounceOut',
    duration : 750
    },
    store : 'BarColumn',
    background : {
    fill : 'none'
    },
    gradients : [ {
    'id' : 'v-1',
    'angle' : 0,
    stops : {
    0 : {
    color : 'rgb(212, 40, 40)'
    },
    100 : {
    color : 'rgb(117, 14, 14)'
    }
    }
    }, {
    'id' : 'v-2',
    'angle' : 0,
    stops : {
    0 : {
    color : 'rgb(180, 216, 42)'
    },
    100 : {
    color : 'rgb(94, 114, 13)'
    }
    }
    }, {
    'id' : 'v-3',
    'angle' : 0,
    stops : {
    0 : {
    color : 'rgb(43, 221, 115)'
    },
    100 : {
    color : 'rgb(14, 117, 56)'
    }
    }
    }, {
    'id' : 'v-4',
    'angle' : 0,
    stops : {
    0 : {
    color : 'rgb(45, 117, 226)'
    },
    100 : {
    color : 'rgb(14, 56, 117)'
    }
    }
    }, {
    'id' : 'v-5',
    'angle' : 0,
    stops : {
    0 : {
    color : 'rgb(187, 45, 222)'
    },
    100 : {
    color : 'rgb(85, 10, 103)'
    }
    }
    } ],
    axes : [ {
    type : 'Numeric',
    position : 'left',
    fields : [ 'count' ],
    minimum : 0,
    maximum : 3000,
    label : {
    renderer : Ext.util.Format.numberRenderer('0,0')
    },
    grid : {
    odd : {
    stroke : '#555'
    },
    even : {
    stroke : '#555'
    }
    }
    }, {
    type : 'Category',
    position : 'bottom',
    fields : [ 'source' ]
    } ],
    series : [ {
    type : 'column',
    axis : 'left',
    seriesId: 'col',
    highlight : true,
    label : {
    display : 'insideEnd',
    'text-anchor' : 'middle',
    field : 'count',
    orientation : 'horizontal',
    fill : '#fff',
    font : '12px Arial'
    },
    renderer : function(sprite, storeItem, barAttr, i, store) {
    barAttr.fill = colors[i % colors.length];
    return barAttr;
    },


    // listeners:{
    // itemmousedown : function(obj) {
    // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);
    // }
    // },

    style : {
    opacity : 0.95
    },
    xField : 'source',
    yField : 'count'
    } ]
    });


    and this is my controller code ....

    Ext.define('Gamma.controller.ControlFile', {

    extend : 'Ext.app.Controller',

    //define the stores
    stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
    //define the models
    models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
    //define the views
    views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],



    init: function () {

    listeners: {
    itemmousedown: function (obj) {
    alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
    }
    }

    this.control({
    'barColumnChart': {
    click: function () {
    var viewCmp = Ext.getCmp('barColumnChart');
    viewCmp.fireEvent('itemmousedown');
    }
    }
    })
    }
    });

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    50
    Answers
    4

    Default

    Why don't you handle your click event inside the view. It can be captured this way.

    Code:
    var bar = Ext.define('Gamma.view.BarColumnChart', {
        extend: 'Ext.chart.Chart',
        alias: 'widget.barColumnChart',
        title: 'barChart',
        height: 300,
        width: Ext.getBody().getViewSize().width * 0.6,
        id: 'barColumnChart',
        xtype: 'chart',
        theme: 'Fancy',
        animate: {
            easing: 'bounceOut',
            duration: 750
        },
        store: 'BarColumn',
        background: {
            fill: 'none'
        },
        listeners: {
            itemmousedown: function (obj) {
                alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
            },
            click: function (e, eOpts) {
                alert(this.storeItem.data['source'] + ' &' + this.storeItem.data['count']);
            }
        }
        gradients: [{
                'id': 'v-1',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(212, 40, 40)'
                    },
                    100: {
                        color: 'rgb(117, 14, 14)'
                    }
                }
            }, {
                'id': 'v-2',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(180, 216, 42)'
                    },
                    100: {
                        color: 'rgb(94, 114, 13)'
                    }
                }
            }, {
                'id': 'v-3',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(43, 221, 115)'
                    },
                    100: {
                        color: 'rgb(14, 117, 56)'
                    }
                }
            }, {
                'id': 'v-4',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(45, 117, 226)'
                    },
                    100: {
                        color: 'rgb(14, 56, 117)'
                    }
                }
            }, {
                'id': 'v-5',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(187, 45, 222)'
                    },
                    100: {
                        color: 'rgb(85, 10, 103)'
                    }
                }
            }
        ],
        axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['count'],
                minimum: 0,
                maximum: 3000,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                grid: {
                    odd: {
                        stroke: '#555'
                    },
                    even: {
                        stroke: '#555'
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['source']
            }
        ],
        series: [{
                type: 'column',
                axis: 'left',
                seriesId: 'col',
                highlight: true,
                label: {
                    display: 'insideEnd',
                    'text-anchor': 'middle',
                    field: 'count',
                    orientation: 'horizontal',
                    fill: '#fff',
                    font: '12px Arial'
                },
                renderer: function (sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
                    return barAttr;
                },
    
    
    
    
                // listeners:{
                // itemmousedown : function(obj) {
                // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);
                // }
                // },
    
    
                style: {
                    opacity: 0.95
                },
                xField: 'source',
                yField: 'count'
            }
        ]
    });
    If you still want to fire from controller try your luck with this.
    Code:
    Ext.define('Gamma.controller.ControlFile', {
    
    
        extend: 'Ext.app.Controller',
    
    
        //define the stores
        stores: ['BarColumn', 'RadarView', 'VoiceCallStore', 'SMSCallStore', 'MMSCallStore', 'GPRSUsageStore'],
        //define the models 
        models: ['BarCol', 'radar', 'VoiceCallModel', 'SMSCallModel', 'MMSCallModel', 'GPRSUsageModel'],
        //define the views
        views: ['BarColumnChart', 'LineChart', 'RadarChart', 'VoicePie', 'SMSPie', 'MMSPie', 'GPRSPie'],
    
    
    
    
    
    
        init: function () {
            this.control({
                'barColumnChart': {
                    click: {
                        fn: function () {
                            var viewCmp = Ext.getCmp('barColumnChart');
                            viewCmp.fireEvent('itemmousedown');
                        }
                    }
                }
            })
        }
    });

  7. #7

    Default

    listeners: { itemmousedown: function (obj) { alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']); }this part is self sufficient to catch the event from view but i need to call it from controller because in the next step i will have a database i have to call the value from that so if i dont use the controller i will not get the issue solved

  8. #8
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    The controller can't listen to the series events directly since the series isn't a 'component'. So, one thing you can do is in your listeners config have the itemmousedown handler fire an 'itemmousedown' event on the chart itself since the chart is a component and can be listened to from the controller.

    Code:
    listeners: {
        itemmousedown: function (obj) {
            chart.fireEvent('itemmousedown', obj);
        }
    }
    Then in your controller you can listen to the chart's itemmousedown event (it didn't have one natively, but by firing that event on the chart manually now it does).

    Code:
    this.control({
            '#barColumnChart': {             // don't forget the # in front of the ID if that is, in fact, the chart's ID
                itemmousedown: function (obj) {}
            }
    })
    Also, for readability it would be best to wrap your code snippets in [ ] code brackets.

Tags for this Thread

Posting Permissions

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