How to simulate onblur event for a Panel in Extjs
Here is a simple trick in Extjs I borrowed from Ext.layout.BorderLayout that simulates listening for the onblur event of an Ext.Panel. This trick is necessary because unfortunately Ext.Panel does not natively support registering for the onblur event (or at least I don't know how). We typically use this trick when we show a Panel and want to remove it when the user clicks off, or to state it differently, when the Panel looses focus. This is very similar to how menus work.
Step 1: Register for mousedown eventthis.panel.show();
Ext.getDoc().on("mousedown", this.handleDocMouseDown, this);
First, we show the panel. Here it is assumed this was created previously. Second, we use Ext.getDoc() to return the current HTML document object, and then we register for the mousedown event. The second parameter, this.handleDocMouseDown, is our function we want called when this event is fired. Notice that we register for the mousedown event as opposed to the click event. This is intentional because listening for the click event will actually call this.handleDocMouseDown before your ready because a click involves both mousedown and mouseup.
Step 2: Handle the event
handleDocMouseDown : function(e) {
if (!e.within(this.panel.getEl())) {
this.panel.destroy();
Ext.getDoc().un("mousedown", this.handleDocMouseDown, this);
}
}
In our second step we first check to make sure the user didn't click anywhere in the Panel that was just displayed. If it wasn't then we destroy the panel and unregister the mousedown event.
6 comments:
great except what if you want that blur to cancel any operations the user has tried to click on outside of that panel.
for example if the user clicks on a button outside of the panel i want the focus to stay within the panel, it does but the button is toggled
What if the user focuses components via 'TAB' key?
thanks, it helped me with floating form panel.
Superb Information and really appreciated with it and this is fine to read and valuable. I like it.
Digital Marketing Course fees in Hyderabad
I am here for the first time. I found this blog and found it really useful and it helped me a lot, thank you.
Data Analytics Training in Bangalore
Maintaining good quality content is a task, and you guys are performing this task very accurately. Winter Sale Jackets
Post a Comment