PDA

View Full Version : Disable Legend Click Event for ExtJs Charts



kumarmanoj1980
24 Oct 2011, 10:30 AM
Hi All,
I need to disable the default behavior for legend click which show/hides the chart element.
I tried doing this but its not working

Ext.each(chart.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
})

Please let me know if anyone have done this before.

Manoj

kumarmanoj1980
24 Oct 2011, 12:49 PM
Ok. Was able to solve the issue.

We need to add following after the chart is rendered .
Ext.each(chart.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
})

Manoj

soubhagya ranjan
18 Nov 2011, 5:40 AM
How to disabled the click functionality of legend in sencha touch?

sunvish
3 May 2012, 3:44 AM
I tried with the above code in afterrender listener, but its not working.

Can anybody please help me to disable the click event in legend.

Orphan Jackal
16 May 2012, 6:34 AM
use that like this


Ext.each(
Ext.getCmp('YOUR CHART ID')
.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
})

you must
replace

YOUR CHART ID
with id of chart that you want to disable its legend hover behavior
it works i do it

hellowahab
11 Jul 2012, 11:15 PM
Can anyone suggest where to place these link?

Ext.each(

Ext.getCmp('YOUR CHART ID')

.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
})

If you can paste the whole code for this pie chart, it will be more than helpful.
Thanks

hellowahab
12 Jul 2012, 12:26 AM
You can find a live working here
http://hellowahab.wordpress.com/2012/07/12/how-to-make-legend-non-clickable-in-ext-js-pie-chart/

UpendraKumar
2 Jan 2013, 9:57 PM
Is it possible to add a listeners on the legend item(EXT JS MVC).

i tried but it is working for the first time click but it is not working on the second time click event.
{
xtype : 'lineChart',
listeners : {
afterrender : function(chart, eOpts){
setTimeout(function(){
var legendItems = chart.legend.items;
if(legendItems){
for(var i = 0; i < legendItems.length; i++){
legendItems[i].on('mousedown', function(event){
console.log('Mouse Down : ' + event);
});
legendItems[i].on('mousedown', function(event){
console.log('Mouse Over : ' + event);
});
/* legendItems[i].un("mousedown", legendItems[i].events.mousedown.listeners[0].fn);*/
}
}

}, 200);
}
}
}

Also how i can disable and enable the series lines or any chart through programmetically using extjs mvc.

Is it possible to replace the Legend Item feature(Hide and show the charts box or lines) with the check boxes.