2010-02-27 7 views
11

Czy jest jeszcze możliwe, aby autouzupełnianie dla pola kombi zaczynało się od dowolnego miejsca w tekście, pozwolę sobie podać przykład. Jeśli mam kogoś o imieniu John Smith w combobox, jeśli zacznę od litery "j", to ciągnie john smith, ale mniej mówią, że chcę zacząć od litery "s", aby wyszukać jego nazwisko, jest to możliwe, jeśli tak czy ktoś ma kod lub link do kodu, który to robi.Autouzupełnianie w polu kombi

+0

Sprawdź http://dev.arcbees.com/gwtchosen/ opiera się na GQuery –

Odpowiedz

12

Czy obejrzałeś SuggestBox? MultiWordSuggestOracle, który podaje dane do pola propozycji, wydaje się robić dokładnie to, czego oczekujesz - zobacz javadocs do użycia i przykłady.

Aktualizacja: Oto raczej miły przykładem dostosowywania GWT na SuggestBox wyglądać jak ten na Facebooku: http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete Pamiętaj, aby śledzić wszystkie linki w tym poradniku, gdyż zawierają wiele informacji na temat korzystania z SuggestBox.

2

zastąpić metodę logiczna (rekord ModelData, nieruchomości String) isFiltered z ListStore metody ciała combobox.The będą następujące:

if (filterBeginsWith != null && property != null) { 
    Object o = record.get(property); 
    if (o != null) { 
     if (!o.toString().toLowerCase().contains(filterBeginsWith.toLowerCase())) { 
      return true; 
     } 
    } 
} 
if (filters != null) { 
    for (StoreFilter filter : filters) { 
     boolean result = filter.select(this, record, record, property); 
     if (!result) { 
      return true; 
     } 
    } 
} 
return false; 
3

byłem mieć żadnych problemów z AdvancedComboBoxExample Sencha http://www.sencha.com/examples/#ExamplePlace:advancedcombobox

Znalazłem w tym linku http://www.sencha.com/forum/showthread.php?222543-CRTL-C-triggers-a-reload-of-data-in-Combobox odpowiedź na mój problem.

Musiałem wprowadzić pewne poprawki do mojego kodu. Poniżej znajduje się kod dla tych, którzy jej potrzebują.

ComboBox ajax bez stronicowania:

import com.extjs.gxt.ui.client.data.*; 
import com.extjs.gxt.ui.client.store.ListStore; 
import com.extjs.gxt.ui.client.widget.form.ComboBox; 
import com.google.gwt.user.client.rpc.AsyncCallback; 
import java.util.List; 
import java.util.Map; 

public class AjaxComboBox<T extends ModelData> extends ComboBox<T> { 

    public AjaxComboBox() { 
    } 

    public interface GetDataCallback<T> { 

     void getData(String query, AsyncCallback<List<T>> dataCallback); 
    } 

    public AjaxComboBox(final String displayField, final int minChars, final GetDataCallback<T> getDataCallback) { 
     final RpcProxy<ListLoadResult<T>> proxy = new RpcProxy<ListLoadResult<T>>() { 

      @Override 
      protected void load(final Object loadConfig, final AsyncCallback<ListLoadResult<T>> callback) { 
       ListLoadConfig load = (ListLoadConfig) loadConfig; 
       final Map<String, Object> properties = load.getProperties(); 

       getDataCallback.getData((String) properties.get("query"), new AsyncCallback<List<T>>() { 

        public void onFailure(Throwable caught) { 
         caught.printStackTrace(); 
        } 

        public void onSuccess(List<T> result) { 
         callback.onSuccess(new BaseListLoadResult<T>(result)); 
        } 
       }); 

      } 
     }; 
     final BaseListLoader<ListLoadResult<T>> loader = new BaseListLoader<ListLoadResult<T>>(proxy); 
     final ListStore<T> store = new ListStore<T>(loader); 
     setFieldLabel(displayField); 
     setStore(store); 
     setHideTrigger(true); 
     setMinChars(minChars); 
     setWidth(300); 
    } 

} 

ComboBox leniwy z stronicowania

import com.extjs.gxt.ui.client.data.*; 
import com.extjs.gxt.ui.client.event.Listener; 
import com.extjs.gxt.ui.client.store.ListStore; 
import com.extjs.gxt.ui.client.widget.form.ComboBox; 
import com.google.gwt.user.client.rpc.AsyncCallback; 
import java.util.Map; 

public class ComboBoxLazy<T extends ModelData> extends ComboBox<T> { 

    public interface GetPagingDataCallback<T> { 

     void getData(String query, PagingLoadConfig loadConfig, 
       AsyncCallback<PagingLoadResult<T>> dataCallback); 
    } 

    public ComboBoxLazy(final String displayField, final int minChars, 
      final GetPagingDataCallback<T> getDataCallback) { 


     final RpcProxy<PagingLoadResult<T>> proxy = new RpcProxy<PagingLoadResult<T>>() { 

      @Override 
      protected void load(Object loadConfig, 
        final AsyncCallback<PagingLoadResult<T>> callback) { 
       final Map<String, Object> properties = ((PagingLoadConfig) loadConfig).getProperties(); 
       getDataCallback.getData((String) properties.get("query"), 
         ((PagingLoadConfig) loadConfig), 
         new AsyncCallback<PagingLoadResult<T>>() { 

          @Override 
          public void onSuccess(
            final PagingLoadResult<T> result) { 
           callback.onSuccess(result); 
          } 

          @Override 
          public void onFailure(Throwable caught) { 
           callback.onFailure(caught); 
          } 
         }); 
      } 
     }; 


     ModelReader reader = new ModelReader(); 
     final BasePagingLoader<PagingLoadResult<T>> loader = new BasePagingLoader<PagingLoadResult<T>>(
       proxy, reader); 
     loader.addListener(Loader.BeforeLoad, new Listener<LoadEvent>() { 

      public void handleEvent(LoadEvent be) { 
       be.<ModelData>getConfig().set("start", 
         be.<ModelData>getConfig().get("offset")); 
      } 
     }); 

     setFieldLabel(displayField); 
     final ListStore<T> store = new ListStore<T>(loader); 
     setStore(store); 
     setHideTrigger(true); 
     setMinChars(minChars); 
     setPageSize(10); 
     setWidth(300); 
    } 

} 

Klasa testu

import br.ueg.escala.client.view.ConversorBeanModel; 
import com.extjs.gxt.ui.client.data.*; 
import com.extjs.gxt.ui.client.event.SelectionChangedEvent; 
import com.extjs.gxt.ui.client.event.SelectionChangedListener; 

import com.extjs.gxt.ui.client.widget.LayoutContainer; 
import com.extjs.gxt.ui.client.widget.VerticalPanel; 
import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.rpc.AsyncCallback; 
import java.util.List; 
public class ComboBoxTest extends LayoutContainer { 

    @Override 
    protected void onRender(Element parent, int index) { 
     super.onRender(parent, index); 
     criarComboBox(); 
     criarComboBoxLazy(); 
    } 

    private void criarComboBox() { 

     final AjaxComboBox<BeanModel> combo = new AjaxComboBox<BeanModel>("name", 3, new AjaxComboBox.GetDataCallback<BeanModel>() { 

      public void getData(String query, final AsyncCallback<List<BeanModel>> dataCallback) { 
       servico.loadLike(query, new AsyncCallback<List<Person>>() { 

        public void onFailure(Throwable caught) { 
         caught.printStackTrace(); 
        } 

        public void onSuccess(List<Person> result) { 
         List<BeanModel> dados = ConversorBeanModel.getListBeanModel(result); 
         dataCallback.onSuccess(dados); 
        } 
       }); 
      } 
     }); 

     combo.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() { 

      @Override 
      public void selectionChanged(SelectionChangedEvent<BeanModel> se) { 
       BeanModel bm = combo.getView().getSelectionModel().getSelectedItem(); 
       Person p = bm.getBean(); 
       combo.setValue(bm); 

       try { 
        combo.setValue(bm); 
        combo.setRawValue(p.getName()); 
       } catch (Exception e) { 
        e.printStackTrace(); 
       } 

      } 
     }); 

     combo.setItemSelector("div.search-item"); 
     combo.setTemplate(getTemplate()); 

     addText("Any text"); 
     add(combo); 
    } 

    private void criarComboBoxLazy() { 
     String field = "name"; 
     final ComboBoxLazy<BeanModel> comboLazy = new ComboBoxLazy<BeanModel>(field, 3, new      ComboBoxLazy.GetPagingDataCallback<BeanModel>() { 

      public void getData(String query, PagingLoadConfig loadConfig, final AsyncCallback<PagingLoadResult<BeanModel>> dataCallback) { 
       final PagingLoadConfig load = (PagingLoadConfig) loadConfig; 

       servico.loadLike(load, new Person(), "name", query, new AsyncCallback<List>() { 

        public void onFailure(Throwable caught) { 
         caught.printStackTrace(); 
        } 

        public void onSuccess(List result) { 
         PagingLoadResult<BeanModel> dados = ConversorBeanModel.getPagingLoadResultBeanModel(result, load); 
         dataCallback.onSuccess(dados); 
        } 
       }); 
      } 
     }); 

     comboLazy.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() { 

      @Override 
      public void selectionChanged(SelectionChangedEvent<BeanModel> se) { 
       BeanModel bm = comboLazy.getView().getSelectionModel().getSelectedItem(); 
       Person p = bm.getBean(); 
       comboLazy.setValue(bm); 

       try { 
        comboLazy.setValue(bm); 
        comboLazy.setRawValue(p.getName()); 
       } catch (Exception e) { 
        e.printStackTrace(); 
       } 

      } 
     }); 

     comboLazy.setItemSelector("div.search-item"); 
     comboLazy.setTemplate(getTemplate()); 

     VerticalPanel vp2 = new VerticalPanel(); 
     vp2.setSpacing(10); 
     vp2.addText("<span class='text'><b>Combo lazy</span>"); 
     vp2.add(comboLazy); 
     add(vp2); 
    } 

    private native String getTemplate() /*-{ 
    return [ '<tpl for="."><div class="search-item">', 
    ' <h3> <span> Name:</span> <span style="font-weight:normal;">{name}</span> ', 
    ' <span> - Last name:</span> <span style="font-weight: normal">{lastName}</span></h3>', '</div></tpl>'].join(""); 
    }-*/; 

} 

Application.css:

.searchItem { 
    font: normal 11px tahoma, arial, helvetica, sans-serif; 
    padding: 3px 10px 3px 10px; 
    white-space: normal; 
    color: #555; 
} 

.searchItem h3 { 
    display: block; 
    font: inherit; 
    font-weight: bold; 
    color: #222; 
} 

.searchItem h3 span { 
    float: right; 
    font-weight: normal; 
    margin: 0 0 5px 5px; 
    width: 100px; 
    display: block; 
    clear: none; 
} 

serwer Kod

public List loadLike(PagingLoadConfig config, Person classe, String field, String query) { 
    List<Person> list = null; 
    try { 
     List listEntity = genericoBC.loadLike(config.getOffset(), config.getLimit(), field, query, classe.getClass()); 
     list = clone(listEntity); 

     final int totalCount = genericoBC.contarRegistros(classe.getClass()); 
     config.setLimit(totalCount); 
    } catch (Exception e) { 
     tratarExcecao("", e); 
    } 
    return list; 
} 

public List<Person> loadLike(String query) { 
    List<Person> list = null; 
    try { 
     List<Person> listEntity = genericoBC.loadLike(query); 
     list = clone(listEntity); 
    } catch (Exception e) { 
     tratarExcecao("Error:genericoBC.loadLike(query)", e); 
    } 
    return list; 
} 
0

To dla GXT 3.0.

Najpierw należy utworzyć instancję zastąpionej klasy ListStore takiego:

public static class MyListStore extends ListStore<Course>{ 
    private String userText=""; 
    public MyListStore(ModelKeyProvider<Course> k){ 
    super(k); 
    } 

    @Override 
    protected boolean isFilteredOut(Course item) { 
    boolean result = false; 
    if(item.getTitle()!=null && 
     !item.getTitle().toUpperCase().contains(userText.toUpperCase())){ 
     result = true; 
    } 
    return result; 
    } 
    public void setUserText(String t){ userText = t; } 
} 

W tym przypadku miałem klasę modelu przedmiotu, który miał tytuł kursu (łańcuch) jako dostawcę etykiet dla combobox . Więc w swojej nadpisanej klasie, wykonaj podobne: użyj swojego określonego modelu (typ tego wystąpienia z combobox) zamiast "Course" w powyższym kodzie.

Następnie należy utworzyć instancję tego sklepu do użytku przez combobox:

private MyListStore courses ; 

Dalej, upewnij się zainicjować combobox odpowiednio z tym.W moim przypadku użyłem UiBinder, więc moja initializer to:

@UiFactory 
    ListStore<Course> createListStore() { 
    courses = new MyListStore(courseProps.key()); 
    return courses; 
    } 

Odpowiednie fragmenty UiBinder:

<ui:with type="com.sencha.gxt.data.shared.LabelProvider" field="titles"/> 
    <ui:with type="com.sencha.gxt.data.shared.ListStore" field="courses"/> 
    ... 
    <form:ComboBox ui:field="classTitle" store="{courses}" labelProvider="{titles}" 
     allowBlank="false" forceSelection="true" triggerAction="ALL" width="200" /> 

Oczywiście, wiązanie do swojego oprawionego klasy Java:

@UiField ComboBox<Course> classTitle; 

I wreszcie, upewnij się, że obsługujesz zdarzenie keyup z wejścia combobox:

classTitle.addKeyUpHandler(new KeyUpHandler(){ 
    @Override 
    public void onKeyUp(KeyUpEvent event) { 
    courses.setUserText(classTitle.getText()); 
    } 
}); 

To działało idealnie (pierwszy raz!).