1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      1  

    Default Ext chart custom event

    Ext chart custom event


    I wonder how to fire some custom events in chart and make it available to its parent component.

    The following is slightly modified from the example given by ext.

    Basically i just want to fire a custom event in the data series' highlightItem method ... and want to catch and handle it later, as in


    var chart = Ext.create('myChart', {
    store: store1
    });
    chart.on('chartHover', function () { console.log('chart hover')}, this);
    .
    ...

    It did not work. Why?

    The following is the full dummy code.

    Thanks
    Ext.define('myChart', {
    extend: 'Ext.chart.Chart',
    id: 'myChart',
    style: 'background:#fff',
    animate: true,
    //store: store1,
    shadow: true,
    theme: 'Category1',
    legend: {
    position: 'right'
    },
    axes: [{
    type: 'Numeric',
    minimum: 0,
    position: 'left',
    fields: ['data1', 'data2', 'data3'],
    title: 'Number of Hits',
    minorTickSteps: 1,
    grid: {
    odd: {
    opacity: 1,
    fill: '#ddd',
    stroke: '#bbb',
    'stroke-width': 0.5
    }
    }
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Month of the Year'
    }],
    series: [{
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },


    axis: 'left',
    xField: 'name',
    yField: 'data1',
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    },
    highlightItem: function (item) {
    // console.log(this);
    this.fireEvent("chartHover");
    //nm
    }
    }, {
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    smooth: true,
    xField: 'name',
    yField: 'data2',
    markerConfig: {
    type: 'circle',
    size: 4,
    radius: 4,
    'stroke-width': 0
    },
    highlightItem: function (item) {
    // console.log(this);
    this.fireEvent("chartHover");
    }


    }, {
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    smooth: true,
    fill: true,
    xField: 'name',
    yField: 'data3',
    markerConfig: {
    type: 'circle',
    size: 4,
    radius: 4,
    'stroke-width': 0
    },
    highlightItem: function (item) {
    // console.log(this);
    this.fireEvent("chartHover");
    //nm
    }


    }],


    initComponent: function () {
    this.callParent();
    this.addEvents("chartHover");


    }
    });






    Ext.onReady(function () {
    var generateData = function (n, floor) {
    var data = [],
    p = (Math.random() * 11) + 1,
    i;


    floor = (!floor && floor !== 0) ? 20 : floor;


    for (i = 0; i < (n || 12); i++) {
    data.push({
    name: Ext.Date.monthNames[i % 12],
    data1: Math.floor(Math.max((Math.random() * 100), floor)),
    data2: Math.floor(Math.max((Math.random() * 100), floor)),
    data3: Math.floor(Math.max((Math.random() * 100), floor)),
    data4: Math.floor(Math.max((Math.random() * 100), floor)),
    data5: Math.floor(Math.max((Math.random() * 100), floor)),
    data6: Math.floor(Math.max((Math.random() * 100), floor)),
    data7: Math.floor(Math.max((Math.random() * 100), floor)),
    data8: Math.floor(Math.max((Math.random() * 100), floor)),
    data9: Math.floor(Math.max((Math.random() * 100), floor))
    });
    }


    return data;
    };




    var store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
    data: generateData()
    });


    store1.loadData(generateData(8));


    var chart = Ext.create('myChart', {
    store: store1
    });
    chart.on('chartHover', function () { console.log('chart hover')}, this);
    var win = Ext.create('Ext.Window', {
    width: 800,
    height: 600,
    minHeight: 400,
    minWidth: 550,
    hidden: false,
    maximizable: true,
    title: 'Line Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    tbar: [{
    text: 'Save Chart',
    handler: function () {
    Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
    if (choice == 'yes') {
    chart.save({
    type: 'image/png'
    });
    }
    });
    }
    }, {
    text: 'Reload Data',
    handler: function () {
    store1.loadData(generateData(8));
    }
    }],
    items: chart
    });








    });

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    Does someone has an answer? Why the fireEvent, addEvent model would not work here? thanks