PDA

View Full Version : Intercepting Component events



varunach
23 Mar 2013, 7:33 AM
Hi,

I am implementing a tooltip based help for my components. So it goes like this : when a user clicks on help, a custom tooltip is shown for each important part of the component one at a time. The tooltip has 3 buttons, "Prev", "Next" and "Finish". As the names suggest, prev button will show the prev tooltip, next will show the next and finish will end the help.

Now what I want is that while the help is being shown, either :
a) All sub components, html etc should be disabled
b) Events fired by these should be swallowed.

I want these so that the user can complete the help without clicking on something and activating some other component unknowingly.

I tried the following but they don't work:


els = this.query('component');
for (i = 0; i < els.length; i++) {
els[i].suspendEvents();
}




els = Ext.dom.Query.select("*", this.getEl().dom);
for (i = 0; i < els.length; i++) {
els[i].disabled = true;
}

Above 2 don't work at all. Below works on some, but doesn't work on some. Example: The help button is in a menu, so after the following code runs, the menu remains open.


var originalFireEvent = Ext.util.Observable.prototype.fireEvent
Ext.util.Observable.prototype.fireEvent = function(){
return false;
}
/* after help finishes
**/
Ext.util.Observable.prototype.fireEvent = originalFireEvent;


What do I do to suspend or swallow all events of the children of a parent component.

slemmon
23 Mar 2013, 9:01 PM
Something like this work?



Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'panel',
border: false
, items: [{
xtype: 'button'
, text: 'Button A'
, handler: function () { console.log('Button A'); }
}]
}
, buttons: [{
text: 'Prevent Events'
, enableToggle: true
, toggleHandler: function (btn, state) {
var panel = btn.up('window').down('panel')
, components = panel.query('component');

if (state) {
panel.el.mask();
//Ext.fly(panel.el.query('.x-mask')[0]).applyStyles({opacity: 0});
Ext.fly(panel.el.query('.x-mask')[0]).setOpacity(0);
} else {
panel.el.unmask();
}
}
}]
}).show();

varunach
23 Mar 2013, 10:14 PM
That worked beautifully. Brilliant solution.

Thanks!