Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3766 in a recent build.
  1. #1
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,712
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default [4.0.5] Not possible to set 'cursor' attribute on a Column chart series

    [4.0.5] Not possible to set 'cursor' attribute on a Column chart series


    Consider the simple style object below, the cursor config has no effect. Somehow the cursor value for the sprite is reset to '0' during rendering.

    Code:
    series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    style : {
                        cursor : 'pointer',
                        stroke : 'black',
                        "stroke-width":5
                    }
    }]
    Full test case, expecting to see cursor : pointer when hovering over a column bar.
    Code:
    /*
    
    This file is part of Ext JS 4
    
    Copyright (c) 2011 Sencha Inc
    
    Contact:  http://www.sencha.com/contact
    
    GNU General Public License Usage
    This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
    
    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
    
    */
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite']);
    
    Ext.onReady(function () {
        var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            hidden: false,
            maximizable: true,
            title: 'Column Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                    store1.loadData(generateData());
                }
            }],
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                shadow: true,
                store: store1,
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Number of Hits',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    style : {
                        cursor : 'pointer',
                        stroke : 'black',
                        "stroke-width":5
                    },
                    tips: {
                      trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
                      }
                    },
                    label: {
                      display: 'insideEnd',
                      'text-anchor': 'middle',
                        field: 'data1',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    },
                    xField: 'name',
                    yField: 'data1'
                }]
            }
        });
    });
    A simple hack to achieve cursor change on hover:

    Code:
    Ext.chart.series.Column.override({
            highlightItem: function(item) {
                this.callOverridden(arguments);
                
                if (!item) {
                    return;
                }
                var sprite = item.sprite;
                if (!sprite) {
                    return;
                }
                
                sprite.setAttributes({
                    'cursor' : 'pointer'
                });
            }
        });

  2. #2
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    221
    Vote Rating
    9
    mike.estes will become famous soon enough

      0  

    Default


    confirmed, thanks for the report

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    35
    Vote Rating
    2
    ejerrywest is on a distinguished road

      0  

    Default Fixed now?

    Fixed now?


    This seems to be working now for me in 4.1.1 using the style config. Should this be updated as fixed?

Thread Participants: 2