ComboBox with TypeAhead - can someone help me?

[Cypher]

Hi guys,

I'm playing with GXT 1.1 and ComboBox with TypeAhead enabled. I already got something working (ComboBox + ListStore + BaseListLoader + HttpProxy + JsonReader) however I have a few questions:

1. Who is responsible for filtering the list of available values in ComboBox when user starts typing the leading characters? Let's assume that ComboBox has 100 initial values. When user types first two or three characters, how to filter out the values that do not match those first letters and narrow down the selection to for example 20 remaining values?

I can the ComboBox API has methods like: setTriggerAction(), doQuery(), setAllQuery(), setTypeAhead(), setTypeAheadDelay() etc. but how to use all of that? I must admit, documentation/JavaDoc is not great in this respect...

2. I noticed that ComboBox loader/reader sends a lot of requests to my backend that produces the JSON data with query parameters like this:

?sortDir=NONE&sortDir=NONE&start=0&limit=0

or

?sortDir=NONE&sortDir=NONE&start=0&limit=0&sortDir=NONE&start=0&limit=0

or

?sortDir=NONE&sortDir=NONE&start=0&limit=0&sortDir=NONE&start=0&limit=0&sortDir=NONE&start=0&limit=0&sortDir=NONE&start=0&limit=0&sortDir=NONE&start=0&limit=0&sortDir=NONE&start=0&limit=0

Sometimes the list of query parameters gets pretty long. Why's that? How to disable that? I don't need any paging or limits there... Also I played with ComboBox.setAllQuery() but I didn't make it work, I never saw my query actually included in the request. Any ideas how to work with that?

3. Also I noticed that when I start typing into the ComboBox, the ComboBox immediately replaces the first characters I typed with the first value from the list...isn't it strange?

For example the list has values: Apple, Banana, Orange (in this order) and when I start typing "Oran", the combo box replaced it with "Appl" and "e" (last character in Apple) is highlighted - see attached screenshot.

4. Does anybody have any working example of ComboBox with TypeAhead and any reader/proxy? If so, can you post it here?

Thanks a lot.

Here is my combo box code:

ModelType type = new ModelType();
type.root = "fruit";
type.id = "id";
type.addField("label");
type.addField("price");
        
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "fruit");
HttpProxy<ModelData, ListLoadResult<ModelData>> proxy = new HttpProxy<ModelData, ListLoadResult<ModelData>>(builder);
        
JsonReader<ModelData> reader = new JsonReader<ModelData>(type);

ListLoader loader = new BaseListLoader(proxy, reader);

ListStore<ModelData> store = new ListStore<ModelData>(loader);
      
ComboBox<ModelData> combo = new ComboBox<ModelData>();
        
combo.setDisplayField("label");
combo.setFieldLabel("id");
combo.setStore(store);
combo.setHideTrigger(true);
combo.setTypeAhead(true);
combo.setMinChars(1);

And JSON data:

{
    "fruit" : [
        {"id":1, "label":"Apple",  "price":"$1/lb"},
        {"id":2, "label":"Banana", "price":"$2/lb"},
        {"id":3, "label":"Orange", "price":"$3/lb"},
        {"id":4, "label":"Peach",  "price":"$4/lb"}
    ]
}

[Yan26]

I'm having exactly the same problems and the same questions.

I'm using GWT 1.1.4, JSON reader and HttpProxy...

Can anyone help me?

Thank you!

[The_Jackal]

For posterity:

1) Who is responsible for filtering the list of available values in ComboBox?

The default method is a filter is run on the store. Thus it's client side. If you want to so a server side filter (to save your database!!) then you should consider sending a query parameter to the server. AFAIK this is a custom piece of work, see here for an example http://extjs.com/forum/showthread.php?t=60331

Note: This uses a paging result box, which you may not want. You can change it back to a normal combo with by removing:
setItemSelector("div.search-item");
setTemplate(getTemplateHTML());
setMinListWidth(minListWidth)


It also appears that this combo box ONLY allows you to pick a suggest. To allow anything typed in as well I added a new propertyEditor that adds the raw value into the model list

PropertyEditor<BaseModelData> propertyEditor = new ListModelPropertyEditor<BaseModelData>()
{
@Override
public BaseModelData convertStringValue(String value)
{
BaseModelData m = new BaseModelData();
m.set(getDisplayField(), value);
models.add(m);
return super.convertStringValue(value);
}
};

setPropertyEditor(propertyEditor);
setDisplayField(...);

Carl.