Can we tab through the elements of bar graph in sencha 4.2 Extjs

50 Views Asked by At

I have created a bar graph using Ext Js 4.2.0, I have added tabIndex property but I am unable to tab through the bars. Do we have any way to achieve the tabbing for bars in extjs. I have added tabIndex property in listener, afterrender

Ext.onReady(function() {
 var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',   'data':10 },
        { 'name': 'metric two',   'data': 7 },
        { 'name': 'metric three', 'data': 5 },
        { 'name': 'metric four',  'data': 2 },
        { 'name': 'metric five',  'data':27 }
    ]
});
//create chart using extjs chart module
Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    arialabel:'Sample chart',
    animate: true,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Sample Values',
        grid: true,
        minimum: 0
    }, {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        title: 'Sample Metrics'
    }],
    //Added for Tabbing
    listeners:{
        afterrender:function(c){
            var el=c.el;
        el.set({tabindex:'0','aria-label':c.arialabel});
        }
    },
    series: [{
        type: 'bar',
        axis: 'bottom',
        highlight: true,
        tips: {
          trackMouse: true,
          width: 140,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
          }
        },
        label: {
          display: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data'
    }]
});
});

I have created a bar graph using Ext Js 4.2.0, I have added tabIndex property but I am unable to tab through the bars. Do we have any way to achieve the tabbing for bars in extjs. I have added tabIndex property in listener, afterrender

0

There are 0 best solutions below