PDA

View Full Version : [CLOSED] Keyboard event being called twice in ComboBox



Kutu
5 Sep 2008, 8:57 AM
Select an item in ComboBox to fill its TextField "UI". Press "Enter". Keyboard event is being called twice.

This is in GXT 1.1-alpha-3

darrellmeyer
9 Sep 2008, 7:44 AM
How are you listening for the enter key event?

Kutu
10 Sep 2008, 5:46 PM
Sorry, to clarify, it's in GXT 1.1 alpha 2

All you need to do is to register KeyListener to ComboBox (that has a ListStore)

darrellmeyer
11 Sep 2008, 5:39 AM
1.1 Alpha 4 (http://extjs.com/forum/showthread.php?t=45243) is the most recent drop. Please try your code with Alpha 4 and GWT 1.5.2.

Kutu
25 Sep 2008, 9:35 AM
I've added a KeyListener to the State ComboBox on the ComboBoxExample.java

Steps:
1) Select a State (make sure the selected showed up and populated the combobox)
2) Press ENTER
3) All methods keyDown, keyUp and keyPressed are called twice



/*
* Ext GWT - Ext for GWT Copyright(c) 2007, 2008, Ext JS, LLC. licensing@extjs.com http://extjs.com/license
*/
package com.extjs.gxt.samples.client.examples.forms;

import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.samples.resources.client.model.Country;
import com.extjs.gxt.samples.resources.client.model.State;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.google.gwt.core.client.GWT;

public class ComboBoxExample extends LayoutContainer {

public ComboBoxExample() {
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

ListStore<State> states = new ListStore<State>();
states.add(TestData.getStates());

ComboBox<State> combo = new ComboBox<State>();
combo.setEmptyText("Select a state...");
combo.setDisplayField("name");
combo.setWidth(150);
combo.setStore(states);
combo.setTypeAhead(true);
combo.setTriggerAction(TriggerAction.ALL);
combo.addKeyListener(new KeyListener() {

/**
* Fires on key down.
*
* @param event the component event
*/
@Override
public void componentKeyDown(final ComponentEvent event) {
Info.display("KeyListener", "componentKeyDown");
}

/**
* Fires on key press.
*
* @param event the component event
*/
@Override
public void componentKeyPress(final ComponentEvent event) {
Info.display("KeyListener", "componentKeyPress");
}

/**
* Fires on key up.
*
* @param event the component event
*/
@Override
public void componentKeyUp(final ComponentEvent event) {
Info.display("KeyListener", "componentKeyUp");
}
});
vp.add(combo);

states = new ListStore<State>();
states.add(TestData.getStates());
combo = new ComboBox<State>();
combo.setEmptyText("Select a state...");
combo.setDisplayField("name");
combo.setTemplate(getTemplate());
combo.setWidth(150);
combo.setStore(states);
combo.setTypeAhead(true);
combo.setTriggerAction(TriggerAction.ALL);
vp.add(combo);

ListStore<Country> countries = new ListStore<Country>();
countries.add(TestData.getCountries());

ComboBox<Country> combo2 = new ComboBox<Country>();
combo2.setWidth(150);
combo2.setStore(countries);
combo2.setTemplate(getFlagTemplate(GWT.getModuleBaseURL()));
combo2.setDisplayField("name");
combo2.setTypeAhead(true);

vp.add(combo2);
add(vp);
}

private native String getTemplate() /*-{
return [
'<tpl for=".">',
'<div class="x-combo-list-item" qtip="{slogan}" qtitle="State Slogan">{name}</div>',
'</tpl>'
].join("");
}-*/;

private native String getFlagTemplate(String base) /*-{
return [
'<tpl for=".">',
'<div class="x-combo-list-item"><img src="' + base + '/images/icons/fam/flags/{[values.abbr]}.png">&nbsp;{[values.name]}</div>',
'</tpl>'
].join("");
}-*/;

}

darrellmeyer
25 Sep 2008, 10:33 AM
This is fixed in SVN (http://extjs.com/forum/showthread.php?t=47902).

Kutu
17 Feb 2009, 12:19 PM
This bug still exist in GXT 1.2.1

Here's the code (the keyListener will be executed twice):


package com.extjs.gxt.samples.client.examples.forms;

import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.samples.resources.client.model.Country;
import com.extjs.gxt.samples.resources.client.model.State;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.KeyboardListener;

public class ComboBoxExample extends LayoutContainer {

public ComboBoxExample() {
VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

ListStore<State> states = new ListStore<State>();
states.add(TestData.getStates());

ComboBox<State> combo = new ComboBox<State>();
combo.setEmptyText("Select a state...");
combo.setDisplayField("name");
combo.setWidth(150);
combo.setStore(states);
combo.setTypeAhead(true);
combo.setTriggerAction(TriggerAction.ALL);
combo.addKeyListener(new KeyListener() {

/**
* Fires on key press.
*
* @param event the component event
*/
@Override
public void componentKeyPress(final ComponentEvent event) {
if (event.getKeyCode() == KeyboardListener.KEY_ENTER) {
Info.display("Test", "Test Test");
}
}

});
vp.add(combo);

states = new ListStore<State>();
states.add(TestData.getStates());
combo = new ComboBox<State>();
combo.setEmptyText("Select a state...");
combo.setDisplayField("name");
combo.setTemplate(getTemplate());
combo.setWidth(150);
combo.setStore(states);
combo.setTypeAhead(true);
combo.setTriggerAction(TriggerAction.ALL);
vp.add(combo);

ListStore<Country> countries = new ListStore<Country>();
countries.add(TestData.getCountries());

ComboBox<Country> combo2 = new ComboBox<Country>();
combo2.setWidth(150);
combo2.setStore(countries);
combo2.setTemplate(getFlagTemplate(GWT.getModuleBaseURL()));
combo2.setDisplayField("name");
combo2.setTypeAhead(true);
combo2.setTriggerAction(TriggerAction.ALL);

vp.add(combo2);
add(vp);
}

private native String getTemplate() /*-{
return [
'<tpl for=".">',
'<div class="x-combo-list-item" qtip="{slogan}" qtitle="State Slogan">{name}</div>',
'</tpl>'
].join("");
}-*/;

private native String getFlagTemplate(String base) /*-{
return [
'<tpl for=".">',
'<div class="x-combo-list-item"><img src="' + base + '/images/icons/fam/flags/{[values.abbr]}.png">&nbsp;{[values.name]}</div>',
'</tpl>'
].join("");
}-*/;

}

sven
17 Feb 2009, 12:27 PM
You need to stop the event.

Kutu
17 Feb 2009, 12:41 PM
You need to stop the event.

What?

I installed one listener to the ComboBox and I expect that to be called once if I hit enter once. That is the expected behavior.

sven
17 Feb 2009, 1:17 PM
Stop the event and it works is what i meant.

Kutu
17 Feb 2009, 1:27 PM
Stop the event and it works is what i meant.

So when executing the first event, set the doit to false? or... ?

By the way, this is a workaround right?

Whether we're stopping the event or not, this is a bug.

sven
17 Feb 2009, 1:29 PM
event.stopEvent();

you can also try


event.cancelBubble();


and yes. i already fixed it.

Kutu
17 Feb 2009, 1:47 PM
event.stopEvent();you can also try


event.cancelBubble();
and yes. i already fixed it.


It works. Thanks a lot Sven!