How to create a non editable GXT ComboBox?

Question

I use GWT / GXT and try to create a “regular” ComboBox - one that you cannot enter, but you can enter one character and it will automatically go to the first item in the list that starts with this letter. Therefore, I do not want it READONLY, I want you to not be able to replace the text in it with your own text (you cannot enter characters into it).

I can't figure out how to get ComboBox or SimpleComboBox to do this. I tried every combination of settings on it to no avail. I saw that there is a GXT ListBox, but I need a component that extends from the field.

Is there no way to do this, or am I missing something?

Answer 1

The ListBox does what I was looking for - it is not editable, and you can press the key while it is focused, and it will move on to the next match.

Answer 2

Old post, but it is very frustrating, I agree. Below you are probably looking for what you are looking for.

SimpleComboBox<String> names = new SimpleComboBox<String>(); names.add( "Brian" ); names.add( "Kevin" ); names.add( "Katie" ); names.setTriggerAction( TriggerAction.ALL ); 

Answer 3

Using setEditable(false) and setForceSelection(true) and extending the class, you can do it yourself (watching the keystrokes on widgets).

First subclass:

 package net.binarymuse.gwt.gxt.client; import com.extjs.gxt.ui.client.event.ComponentEvent; import com.extjs.gxt.ui.client.event.KeyListener; import com.extjs.gxt.ui.client.widget.form.SimpleComboBox; public class MySimpleComboBox<T extends String> extends SimpleComboBox<T> { public MySimpleComboBox() { super(); this.addKeyListener(new KeyListener(){ @Override public void componentKeyDown(ComponentEvent event) { // Get a reference to the combobox in question MySimpleComboBox<T> combo = MySimpleComboBox.this; // Get the character that has been pressed String sChar = String.valueOf((char) event.getKeyCode()); // TODO - add some checking here to make sure the character is // one we actually want to process // Make sure we have items in the store to iterate int numItems = combo.getStore().getCount(); if(numItems == 0) return; // Check each item in the store to see if it starts with our character for(int i = 0; i < numItems; i++) { String value = combo.getStore().getAt(i).getValue(); // If it does, select it and return if(value.startsWith(sChar) || value.startsWith(sChar.toUpperCase())) { MySimpleComboBox.this.setSimpleValue((T) value); return; } } } }); } } 

And the test:

 package net.binarymuse.gwt.gxt.client; import com.extjs.gxt.ui.client.widget.form.SimpleComboBox; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; public class GxtSandbox implements EntryPoint { public void onModuleLoad() { SimpleComboBox<String> box = new MySimpleComboBox<String>(); box.add("One"); box.add("Two"); box.add("Three"); box.setEditable(false); box.setForceSelection(true); RootPanel.get().add(box); } } 

Giving focus to the list and pressing "T" should select "Two" in the list.

As with the case, the class always selects the first item in the list, which begins with a character; however, it is not difficult to change it so that it selects the next element in the list (as is typical for "real" combined fields).

Answer 4

Using a ListBox is good, but it is gwt and not gxt (at least for gxt 2.2.5 there is no ListBox ). For such situations, when you need to use gxt api cosider after the code (it works, I tested):

 SimpleComboBox<MyEmumType> simpleComboBox = new SimpleComboBox<MyEmumType>(); List<MyEmumType> values = Arrays.asList(MyEmumType.values()); //here you set all values simpleComboBox.add(values); //here set first to display. it does not add new, just display one from collection simpleComboBox.setSimpleValue(values.iterator().next()); //prevent combobox for setting/searching values out of collection simpleComboBox.setEditable(false); //disable autocomplete, with first value it will display all others simpleComboBox.setTriggerAction(ComboBox.TriggerAction.ALL); 

PS I use the enumeration here, but I think that the code works with other types.