2010-02-27 19 views
11

वैसे भी पाठ में कहीं से भी शुरू करने के लिए कॉम्बो बॉक्स के लिए स्वत: पूर्ण होने के लिए, मुझे आपको एक उदाहरण दें। अगर मेरे पास कंबोबॉक्स में जॉन स्मिथ नाम है तो अगर मैं पत्र 'जे' से शुरू करता हूं तो यह जॉन स्मिथ को खींचता है लेकिन कम कहता है कि मैं अपने आखिरी नाम की तलाश करने के लिए पत्र के साथ शुरू करना चाहता हूं, क्या यह संभव है, यदि ऐसा है क्या किसी के पास कोड या कोड का लिंक है जो ऐसा करता है।कॉम्बो बॉक्स स्वत: पूर्ण

+0

जांचें http://dev.arcbees.com/gwtchosen/ GQuery पर आधारित है –

उत्तर

12

क्या आपने SuggestBox पर देखा है? MultiWordSuggestOracle जो सुझाव बॉक्स में डेटा को खिलाता है वह वही करता है जो आप चाहते हैं - उपयोग और उदाहरणों के लिए javadocs देखें।

अद्यतन: यहाँ GWT के SuggestBox फेसबुक पर एक तरह देखने के लिए अनुकूलित करने का एक नहीं बल्कि अच्छा उदाहरण है: http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete कि ट्यूटोरियल में सभी लिंक का पालन करने के रूप में वे SuggestBox उपयोग के बारे में जानकारी का एक बहुत होते हैं सुनिश्चित करें।

2

अवहेलना विधि बूलियन isFiltered (ModelData रिकॉर्ड, स्ट्रिंग संपत्ति) combobox.The विधि शरीर के ListStore की निम्नलिखित किया जाएगा:

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

मैं गया AdvancedComboBoxExample Sencha साथ कोई समस्या है http://www.sencha.com/examples/#ExamplePlace:advancedcombobox

मुझे इस समस्या में http://www.sencha.com/forum/showthread.php?222543-CRTL-C-triggers-a-reload-of-data-in-Combobox मेरी समस्या के लिए प्रतिक्रिया मिली।

मुझे अपने कोड में कुछ समायोजन करना पड़ा। नीचे उन लोगों के लिए कोड है जिन्हें इसकी आवश्यकता है। पेजिंग बिना

ComboBox ajax:

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 पृष्ठन के साथ आलसी

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); 
    } 

} 

क्लास टेस्ट

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; 
} 

कोड सर्वर

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

यह GXT 3.0 के लिए है।

सबसे पहले, इस तरह ओवरराइड ListStore वर्ग का एक उदाहरण बनाने के लिए:

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; } 
} 

इस मामले में, मैं एक कोर्स मॉडल वर्ग कि बता गया के लिए लेबल प्रदाता के रूप में पाठ्यक्रम शीर्षक (एक स्ट्रिंग) था । तो अपने ओवरराइड क्लास में, समान कार्य करें: ऊपर दिए गए कोड में 'कोर्स' के स्थान पर अपने विशिष्ट मॉडल (कंबोबॉक्स के इस उदाहरण का प्रकार) का उपयोग करें। ,

private MyListStore courses ; 

अगला सुनिश्चित करें कि आप इस के साथ उचित रूप से बता गया प्रारंभ करना:

इसके बाद, उपयोग के लिए इस दुकान का एक उदाहरण बता गया द्वारा पैदा करते हैं।मेरे मामले में, मैं, UiBinder इस्तेमाल किया तो मेरे प्रारंभकर्ता यह है:

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

प्रासंगिक 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" /> 
बेशक

, अपने बाध्य जावा वर्ग में लिंकेज:

@UiField ComboBox<Course> classTitle; 

और, अंत में, सुनिश्चित करें कि आप कम्बोबॉक्स इनपुट से कीप ईवेंट को संभाल लें:

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

यह पूरी तरह से काम किया (पहली बार!)।

संबंधित मुद्दे