Can anyone explain me what the difference between focus, focusleave and focusenter on button method with extjs, I'm lost because it seems to be the same when I add event listener. Thanks
kind regards
difference between focus, focusleave and focusenter on button method
with extjs
Method? I guess you mean the events right? Cos:
The focus method will focus your button when you call it.
As you can see on the picture the middle button has focus, you can change the focus on the webpage usually by using TAB key. ExtJS supports full control over your app using keyboard.
The focus, focusenter, focusleave events. If you are not sure what to use - just use "focus"
The focus event should be clear - it's simply fired when the button has focus.
The focusenter is fired when the component get's focus but as the docs states it's also fired in the whole component hirearchy. That means that if the button is in panel which is in view and you focus the button - the focusenter will be fired on the view, panel, button.
main -> panel -> button
Events
The focusleave is the same as focus enter. Fired when focus is lost on the component - again fired in the whole hirearchy. So if the focus went completly away form the page you would see focus leave on the button -> panel -> view
Related
In GUI dialogs, most applications provide for keyboard control as follows:
Enter key - presses the default button. (Default is usually indicated with a bold button border.)
Esc key - presses the Cancel or close button.
Space key - presses widget that currently has keyboard focus.
Tab key - advances focus to next widget.
Question is, when keyboard focus is on a widget that is a button, should the default button be changed to be the one with focus?
I see some issues with this behavior:
The display noise of redrawing buttons to unbold the outline of original default button and rebold the button under focus as being new default.
The Space key is now somewhat redundant with Enter key.
There is no keyboard accelerator to get the normal default button now (Usually the OK button).
However, it seems the trend has been in this direction to change the default button with focus change to another button. What is the rationale for this departure from the early GUIs? It would seem to provide less functionality given there is no way to press the original default button. Did people find that the original model was too complicated for users to understand? I would think keyboard control of dialogs would be a task for advanced users who would have no trouble understanding the model and prefer to have accelerator for current button (Space) and original default button (Enter) at all times.
Note that Qt for one is supporting the change: QPushButton's autoDefault property is responsible for the behavior of changing the default button. By default its value is true. Therefore, you must take extra action to set it to false for all buttons, to prevent them from becoming the default button when focused.
This is not a "departure from the early GUIs", at least not if by "early GUIs", you mean Windows 1.0. The behavior that you describe has been this way since the beginning.
The focused button is always "pushed" when the Enter key is pressed. The default button is only triggered in the following two situations:
The default button has the focus (which it does by default), or
The focus is on a control that does not process Enter key presses (such as a static control, or a single-line textbox that does not have the ES_WANTRETURN style flag set).
The famous Win32 blogger Raymond Chen has a post explaining this behavior (focus specifically on the last two quoted paragraphs):
A dialog box maintains the concept of a "default button" (which is always a pushbutton). The default button is typically drawn with a distinctive look (a heavy outline or a different color) and indicates what action the dialog box will take when you hit Enter. Note that this is not the same as the control that has the focus.
For example, open the Run dialog from the Start menu. Observe that the OK button is the default button; it has a different look from the other buttons. But focus is on the edit control. Your typing goes to the edit control, until you hit Enter; the Enter activates the default button, which is OK.
As you tab through the dialog, observe what happens to the default button. When the dialog box moves focus to a pushbutton, that pushbutton becomes the new default button. But when the dialog box moves focus to something that isn't a pushbutton at all, the OK button resumes its position as the default button.
The dialog manager remebers which control was the default button when the dialog was initially created, and when it moves focus to something that isn't a button, it restores that original button as the default button.
The behavior that I would expect is:
If I press enter when the window just pop up, it should press the default button
If I press tab, I start navigating through the widgets. In this case there are two options:
2.1 I press enter - this event should be delivered to the focused widget. There's no need to change the default button - simply hand the event to the focused widget.
2.2 I press escape. In this case, everything should go back to the state after the window is created.
Notes:
I come from a mixed background - I don't know if I learned this in windows, linux or Mobile OSes! This is just how I expect things to work out.
I don't use the space key (didn't know it's functionality)
I have a scenario where...
1.) Have created a div with a dropdown list and ok, cancel button
2.) On document ready - registering div created on step 1 into a jQuery dialog
3.) on a javascript button click - I am opening this dialog box.
4.) Now, the problem is - the jQuery dialogbox which I have created, needs to be used by other button clicks as well on same page. Now, my div's (which is a dialog at runtime using jQuery) ok button click is already engaged with a javascript function (button1 click) and I can not associate other button's click events with it - thus stuck up here and have no clues or hit to resolve this.
Anyone have faced this issue in asp.net, jquery earlier? Can someone provide a guidance?
Why you cant associate another event?
buttons will have different id. Is it?
$('#button1').click(function() {
alert('Handler for button 1 .click() called.');
});
$('#button2').click(function() {
alert('Handler for button 2 .click() called.');
});
Is this not possible in your case.?
Options:
1) disassociate the click handler when the function opens the div, then later in the function of opening the div associate a click handler to the button.
2) create multiple buttons toggle them all hidden, associate the click handler to each button you want. When the div is opened do a check to see which button to toggle to visible.
3) create no buttons but have a function create the button on the fly. When the div is opened, create the button for that div by calling the function and passing in a code telling it which button to open and what to associate to the click handler (this can be stored in an array and all that is passed in is the key).
Depending on the application, I have used all of these methods. The last one can have a twist that allows it to call an ajax server based application to get the button text and functionality (stored in a database), this saves you from having to load an array with button data, and also allows for easier expansion of the application.
In flex, I am using the following:
mx:TextInput mouseOver="tester(event)"
It works fine. My pointer goes over the textInput and it calls the function. But when I click inside the textInput to enter some text( focus is on the textInput) and then move the mouse (not taking mouse pointer outside of the boundary of textinput), the mouseover event is not trigerred.
If I use click event, then even if I am entering text ( or the focus is on the textinput) and then click, it will call the function.
How can I call the tester function on mouseover when the focus is on textInput?
The mouseOver event fires when the mouse is moved over the control.
Maybe you want to try the mouseMove event which will fire every time the mouse moves?
Keep in mind that mouseEvents and focusEvents are not inherently related. I would expect the mouseOver event to fire when the mouse rolls over your textInput regardless of whether or not that textInput has the focus.
I created a Button in MXMXL. On button click, I create a Menu as a child of the Button. I am using an XML datasource. The reason for creating it this way, was due to the amount of custom skinning involved. A popupmenubutton was not an option. Anyway, so my question is this: when clicking the button, the menu is displayed. However, if you click the button again, the menu reopens. I want the menu to close if the user clicks the button a second time. Now, I got it to work by setting a var after opening the menu, and then I check that var on each click to make sure that the menu isn't already open. If true, then it will close the menu, instead of reopening it. This works, until the user clicks away, in which the HIDE event gets dispatched and the menu closes. My hack no longer works.
Any suggestions? I spent hours trying different things. The hardest part is trying to destinguish from that second button click when the menu is open, and when the user clicks away from the menu. They both dispatch the HIDE event.
Help!!!
Have you tried adding another eventlistener to the button...FlexMouseEvent.MOUSE_DOWN_OUTSIDE ? You should then be able to set the preventDefault event to true to stop the event from firing anything else and stop the menu from closing.
I want to be notified when a FLex Panel gets or loses focus. I've overridden the focusInHandler() and the focusOutHandler(), but they don't get called when I click on the panel.
The panels style changes indicating that it has the focus, but the handler doesn't get called.
What am I missing?
Containers (and implicitly panels) aren't really focusable. Meaning that simply clicking on an empty container won't give it focus, and in consequence, won't trigger the event handler for "focusIn". In order for a container to "gain" focus, a child of that container, that implements IFocusManagerComponent interface, has to gain focus.
So if you want your panel to trigger the "focusIn" event when clicking on it, you should focus a focusable child of that panel on mouse click.
Have you tried to explicitly listen for that event:
myPanel.addEventListener(FocusEvent.FOCUS_IN, myEventHandler);
and made sure that it was getting called?