在sencha中显示工具提示的showDelay正在错误的位置显示。一旦鼠标从目标项目中退出

时间:2016-07-18 08:02:53

标签: javascript extjs

在条形图/柱形图中,当我们想要在延迟一段时间后显示工具提示并从目标元素中取出鼠标时,它会显示在当前鼠标位置,而应显示在首次输入鼠标的目标元素上或最后一个名为mouseout事件的位置。

sencha版本:5.0.0.970。

    Ext.application({
        name: 'PanelHeaderItems',

        launch: function() {

            var graphStore = Ext.create('Ext.data.Store', {
                fields: ['kg', 'ha'],
                data: [{
                    "kg": "0.23",
                    "ha": "2"
                }, {
                    "kg": "0.4",
                    "ha": "5"
                }, {
                    "kg": "0.6",
                    "ha": "7"
                }, {
                    "kg": "0.8",
                    "ha": "9"
                }, {
                    "kg": "0.95",
                    "ha": "13"
                }]
            });

            wizardStep3Chart = new Ext.chart.CartesianChart({
                width: 400,
                height: 300,
                animation: true,
                store: graphStore,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    fields: ['ha'],
                    renderer: function(v) {
                        return v;
                    }
                }, {
                    type: 'numeric',
                    position: 'bottom',
                    grid: true,
                    adjustByMajorUnit: false,
                    fields: ['kg'],
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    axis: 'left',
                    xField: 'kg',
                    yField: 'ha',
                    style: {
                        opacity: 0.80
                    },
                    highlight: {
                        fillStyle: '#125489',
                        lineWidth: 2,
                        strokeStyle: '#fff'
                    },
                    tooltip: {
                        trackMouse: true,
                        showDelay: 2000,
                        style: 'background: #fff',
                        renderer: function(storeItem, item) {
                            this.setHtml(storeItem.get('ha') + ': ' + storeItem.get('kg'));
                        }
                    }
                }],
                renderTo: Ext.getBody()
            });
        }
    });

0 个答案:

没有答案
相关问题