I am currently working on a project in which the end user has two ways of submitting data for analysis.
The first way is: he clicks on a button - the button's listener fires an event called "ProcessBtnClick"
The second way is: he/she presses ENTER - the ENTER key fires the "ProcessBtnClick" event
When the ENTER key is pressed, the "ProcessBtnClick" event gets fired twice, it seems like the click event gets fired this way as well. Is there any way of avoiding this behavior? If so, How?
I enabled the ENTER key as follows:
this.control({
'container *' : {
specialkey : this.onHandleSpecialKey
}
});
The onHandleSpecialKey is defined as follows:
onHandleSpecialKey: function(field, event, options) {
if (event.getKey() == event.ENTER) {
QuickCloseUI.app.fireEvent("ProcessBtnClick");
}
}
Related
I have a gantt attached to onTaskClick and onTaskDblClick events.
When I double click it also fires the onTaskClick event.
How can I prevent that from happening?
It can be non-trivial because the fact is that when the first onTaskClick event fires there is no way to determine whether a user is done with clicking or is he going to do another single click which will then invoke double click event. So if you capture events in browser double click will always look like a sequence 'click'-'click'-'doubleclick'.
So if you need onclick not to fire for double clicks, you may need some timeout in onclick handler in order to check whether next click/doubleclick follows(200-300ms, the exact value may vary between browsers and OS). That way when the user does a single click, the onclick handler will be executed after some delay, and if it's the double click - a timeout for a click handler will be dropped so only onTaskDblClick handler will run.
var a;
gantt.attachEvent("onTaskClick", function(id,e){
setTimeout(function() {
if (a) {
return false;
} else {
gantt.message("onTaskClick")
return true;
}
}, 200)
a = 0;
});
gantt.attachEvent("onTaskDblClick", function(id,e){
gantt.message("onTaskDblClick")
a=1;
return true;
});
Please check this snippet that demonstrates how it works.
I am creating a custom CheckBoxTableView where the selected items are displayed with a CheckBox. If the user attempts to sort the table once items are selected, it appears to mess up. I would like to prompt the user to see if they would like to continue. If so, I would like to clear the selection, if not, simply consume the event so the sorting doesn't happen.
Unfortunately - my EventFilter seems to fire after the sort was completed.
On the TableView constructor, I placed the following code:
addEventFilter(MouseEvent.MOUSE_CLICKED, event -> {
if(event.getTarget() instanceof TableColumnHeader) {
Alert a = new Alert(Alert.AlertType.CONFIRMATION);
a.setContextText("you sure?");
Optional<ButtonType> bt = a.showAndWait();
if(bt.isPresent() && bt.get() == ButtonType.OK){
//Clear selection
getSelectionModel().clearSelection();
}else {
event.consume();
}
}
});
But by the time my EventFilter fires, the table has been sorted.
Any thoughts?
Use MouseEvent.MOUSE_PRESSED
MouseEvent.MOUSE_CLICKED is fired after MouseEvent.MOUSE_RELEASED that's too late to intercept listeners and listeners :)
I have a form and I want to display a confirmation dialogBox when the user presses the back button. Let say that I have one Texbonx that listens to a ChangeValueHandler
addValueChangeHandler(new ValueChangeHandler<String>() {
#Override
public void onValueChange(ValueChangeEvent<String> event) {
setChanged(true);
}
});
This is the short scenario
1) I enter text in the TextBox
2) I hit the back button
3) The ValueChangeEvent is not called
I tried the fire the BlurEvent programmatically on the TextBox with textBox.fireEvent(new BlurEvent() { }); but still no result.
Any suggestions ?
When the page is closed (by pressing the back button, or closing the page) no events will be fired by the controls. What will fire first is window.onbeforeunload to give you a chance to warn the user about data loss and offer to stay on the page. If the user chooses to stay on the page, then all the events that were supposed to be fired, will fire (so your change event will fire).
You can attach a handler to the native onbeforeunload event by using Window.addClosingHandler.
Window.addWindowClosingHandler(new ClosingHandler() {
#Override
public void onWindowClosing( ClosingEvent event )
{
event.setMessage("If you leave the page now all data will be lost.");
}
});
It's worth noting that the ClosingEvent and it's underlying onbeforeunload event, cannot, under any circumstances, be cancelled programmatically. The only way to prevent the user from leaving the page is if the user itself chooses "Stay On This Page" in the popup that results from the code above.
What I did is to set the focus of the TextBox to False and then check if it's changed, that forces the TextBox to unfocus when hiting the back button.
This is the code that check if a form is changed
public boolean isChanged(){
if(formPanel == null) return false;
for (int i = 0; i < formPanel.getWidgetCount(); i++) {
if(formPanel.getWidget(i) instanceof BaseWidget){
BaseWidget w= (BaseWidget) formPanel.getWidget(i);
w.setFocus(false);
if(w.isChanged()){
return true;
}
}
}
return false;
}
I have a simple ExtJS application that is written MVC style (much of my information from here).
My application creates a viewport, and has a view with a form, some fields and a button.
The application has a controller with a 'loginButtonClick" function, and the controller watches the click event with a:
this.control({
'loginwindow button[action=save]': {
click: this.loginButtonClick
}
}
That works great, but now when the login window is showing, I want the enter key to also execute the loginButtonClick method.
I have tried all kinds of things, but the basic issue I am having is WHERE to put the code for creating the keymap, and how to bind it to the proper instances.
For example, if I create the keymap in the controller (which is my preference), I need to get the specific view instance for that controller (I might have multiple windows open of the same kind).
So, How would you create a key map (or?) from within a controller for it's view (window), calling a local method (this.loginButtonClick) when the enter key is pressed?
What you can do is bind the code that initializes the keyMap to the login window afterrender event like this:
this.control{(
'loginwindow' : {
afterrender: this.initializeKeyMap
}
Then make a function that sets up the keyNav:
initializeKeyMap: function(window, options) {
this.keyNav = Ext.create('Ext.util.KeyNav', window.el, {
enter: this.loginButtonClick,
scope: this
});
}
Now when the dialog is loaded if the user presses the Enter key, it should execute your function.
You could setup all these things on your window render event. So when it is rendered you add an eventlistener for the enter key, and in the handler you call programatically click on the login button.
You can achieve this by adding the following listeners to your text/password fields in the form
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = this.up('form').getForm();
submitLoginForm(form);
}
}
}
Here 'form' is your form and 'submitLoginForm' is the function called at form submit which I guess is loginButtonClick in your case.
Hope this helps.
I am using multisearch on my jqgrid to enable users search data from the server side.
My requirement is, I want to capture the search parameters specified by the user in the search grid as soon as they press the Find button.
Accordingly,
a. Is there any event that gets fired when a user clicks the Find button in the search grid?
b. how will I capture the search parameters specified in the search grid?
Thanks in advance.
In case anyone is looking for an answer to the above question:
I found that if we set the closeAfterSearch:true, then clicking 'Find' button triggers onClose event.
Similarly,
for Reset button, set the closeAfterReset:true, this again triggers onClose event.
jQuery("#list").jqGrid('navGrid', "#pager",{},{},{},{},
{multipleSearch:true,closeAfterSearch:true, closeAfterReset:true,
onClose:function()
{
//do work
return true; // return true to close the search grid
}
});
Sorry did not visit this thread for a while.
To determine the search criteria that user selected before pressing find use below code:
onClose:function()
{
var ofilter = $("#list").getGridParam("postData");
for (var i = 0; i < ofilter.rules.length; i++)
{
alert(ofilter.rules[i].field); //- field name
alert(ofilter.rules[i].data); //- value
alert(ofilter.rules[i].op); //- which operation performed
}
}