ExtJS 图表中的上下文菜单

Posted 2023-02-26

【中文标题】ExtJS 图表中的上下文菜单

【英文标题】：Context menu in charts in ExtJS

【发布时间】：2014-08-29 11:46:36

【问题描述】：

我想在 ExtJS 4.1.0 的图表中添加上下文菜单（右键单击）。但是contextmenu 和itemcontextmenu 不起作用。可以做什么？

【参考方案1】：

Ext.define('WeatherPoint', 
    extend: 'Ext.data.Model',
    fields: ['temperature', 'date']
);

var chartMenu = Ext.create('Ext.menu.Menu', 
    items: [
        text: 'Add',
        handler: function() 
            console.log("Add");
        
    , 
        text: 'Delete',
        handler: function() 
            console.log("Delete");
        
    ]
);

var store = Ext.create('Ext.data.Store', 
    model: 'WeatherPoint',
    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)
    ]
);

Ext.create('Ext.chart.Chart', 
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    store: store,
    axes: [
        title: 'Temperature',
        type: 'numeric',
        position: 'left',
        fields: ['temperature'],
        minimum: 0,
        maximum: 100
    , 
        title: 'Time',
        type: 'time',
        position: 'bottom',
        fields: ['date'],
        dateFormat: 'ga'
    ],
    series: [
        type: 'line',
        xField: 'date',
        yField: 'temperature'
    ],
    listeners: 
        afterrender: function() 
            var me = this,
            el = me.getEl();

            // the surface items havn't been added yet, so we wait
            setTimeout(function() 
                var sprites = me.surface.items.items,
                   len = sprites.length,
                   i;
            
                // add class to the sprites for delegation purposes
                for (i = 0; i < len; i++) 
                    sprites[i].addCls('chart-sprite');
                

                // add a contextmenu listener for sprite clicks
                el.on('contextmenu', function(e) 
                    e.stopEvent();

                    chartMenu.showAt(e.getXY());
                , null, 
                    delegate: '.chart-sprite'
                );
            , 0);
        
    
);