GWT-Ext, Remote ComboBox tutorial

Designing a local comboBox is a basic documented task. For the remote mode (where data to be suggested are returned from a server) the documentation is not so clear.

In this post, a basic review of the LOCAL mode is done and in a second part, the REMOTE mode is developped.

Local comboBox mode:

Basic steps:

1. Store initialization
2. Loading the store
3. Creating the combobox with LOCAL mode
4. Linking the combobox with the store

Sample code:

        final Store store = 
            new SimpleStore(new String[] { "civilite", "desc", }, 
                            new String[][] { new String[] { "Mr", "Mr" }, 
                                             new String[] { "Mlle", "Mlle" }, 
                                             new String[] { "Mde", "Mde" } });
        store.load();

        final ComboBox cb = new ComboBox();
        cb.setForceSelection(true);
        cb.setMinChars(1);
        cb.setFieldLabel("Civilité");
        cb.setStore(store);
        cb.setAllowBlank(false);
        cb.setDisplayField("civilite");
        cb.setMode(ComboBox.LOCAL);
        cb.setTriggerAction(ComboBox.ALL);
        cb.setEmptyText("Enter civilité");
        cb.setLoadingText("Recherche...");
        cb.setTypeAhead(true);
        cb.setEditable(false);
        cb.setSelectOnFocus(true);
        cb.setWidth(230);

        cb.setHideTrigger(false);
        add(cb);

Remote comboBox mode:

In that case, the store needs to be constructed dynamicaly from the server.

Each time the user tapes a new key in the combobox, a request has to be sent to the server to update the suggest box. The current combobox value has to be sent as a parameter to the server.

The combobox REMOTE mode uses a POST query to the server with the query parameter filled with the current combobox value.

The server side (any servlet or CGI) needs to analyze the POST request, retrieve the query parameter and return an answer to be displayed in the combobox (in the sample code, JSON is used). Some parameters can be set for autocomplete configuration:

setMinChar: The minimum number of characters the user must type before autocomplete activate (default is 4)

setQueryDelay: The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown list (defaults to 500 ms)

Basic steps:

1. Store creation and loading with a HttpProxy and a JsonReader


2. Combobox creaction with REMOTE mode


3. Linking the combobox with the store


4. Creating the server side part (servlet or CGI) by analyzing the query parameter on the POST request.

Sample code:

         HttpProxy dataProxy = new HttpProxy("/rpc/adherents");
         final String resultTpl = "
{nom} {prenom}
{email}
";   
         RecordDef adherentsRecordDef =  
                 new RecordDef(new FieldDef[] { new StringFieldDef("id"),
                                                new StringFieldDef("nom"), 
                                                new StringFieldDef("prenom"), 
                                                new StringFieldDef("telephoneFixe"), 
                                                new StringFieldDef("telephoneMobile"), 
                                                new StringFieldDef("email"), 
                                                new StringFieldDef("adresse"), 
                                                new StringFieldDef("codePostal"), 
                                                new StringFieldDef("ville") });
         JsonReader reader = new JsonReader(adherentsRecordDef);
         reader.setRoot("adherents");
         Store store = new Store(dataProxy, reader);
         store.load();
         ComboBox cb = new ComboBox();   
         cb.setStore(store);   
         cb.setDisplayField("nom");   
         cb.setId("nom");
         cb.setTypeAhead(false);   
         cb.setLoadingText("Searching...");  
         cb.setFieldLabel("Nom");
         cb.setWidth(230);   
         cb.setTpl(resultTpl);
         cb.setPageSize(10);   
         cb.setHideTrigger(true);   
         cb.setMode(ComboBox.REMOTE);   
         cb.setTitle("Users");   
         //cb.setHideLabel(true);   
         cb.setItemSelector("div.search-item");