¿Hay alguna forma de tener la función de autocompletar para un cuadro combinado que empezar desde cualquier parte del texto, te voy a dar un ejemplo. Si tengo a alguien llamado John Smith en el cuadro combinado si comienzo con la letra 'j' se detiene John Smith, pero menos digo que quiero empezar con la letra 's' para buscar su apellido, es que es posible, si así lo ¿Alguien tiene código o un enlace al código que hace esto?combinado cuadro de autocompletar
¿Has mirado en SuggestBox? El MultiWordSuggestOracle que alimenta los datos en el cuadro de sugerir parece hacer exactamente lo que quiere - ver las javadocs para el uso y ejemplos.
Actualización: Aquí hay un lugar bonito ejemplo de personalización de GWT de SuggestBox para parecerse a la de Facebook: http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete Asegúrese de seguir todos los eslabones de ese tutorial, ya que contienen una gran cantidad de información sobre el uso del SuggestBox.
reemplazar el método booleano (registro ModelData, propiedad String) isFiltered del ListStore del cuerpo del método combobox.The van a seguir:
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;
He estado tiene ningún problema con AdvancedComboBoxExample sencha http://www.sencha.com/examples/#ExamplePlace:advancedcombobox
Encontré en este enlace http://www.sencha.com/forum/showthread.php?222543-CRTL-C-triggers-a-reload-of-data-in-Combobox la respuesta a mi problema.
tuve que hacer algunos ajustes en mi código. A continuación está el código para aquellos que lo necesitan.
ajax ComboBox sin paginación:
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 perezoso con paginación
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);
}
}
clase Test
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;
}
servidor Código
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;
}
Esto es para GXT 3.0.
En primer lugar, crear una instancia de la clase ListStore reemplazado como esto:
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; }
}
En este caso, tuve una clase del modelo de golf que tenía el título del curso (una cadena) como el proveedor de etiqueta para el cuadro combinado . Por lo tanto, en su clase reemplazada, haga algo similar: use su modelo específico (el tipo de esta instancia del cuadro combinado) en lugar de 'Curso' en el código anterior.
A continuación, cree una instancia de esta tienda para su uso por el cuadro combinado:
private MyListStore courses ;
A continuación, asegúrese de inicializar el cuadro combinado adecuadamente con esto.En mi caso, he utilizado UiBinder, por lo que mi inicializador es la siguiente:
@UiFactory
ListStore<Course> createListStore() {
courses = new MyListStore(courseProps.key());
return courses;
}
Los fragmentos UiBinder relevantes:
<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" />
Por supuesto, la vinculación en su cota clase java:
@UiField ComboBox<Course> classTitle;
Y, finalmente, asegúrese de manejar el evento de teclado desde la entrada del cuadro combinado:
classTitle.addKeyUpHandler(new KeyUpHandler(){
@Override
public void onKeyUp(KeyUpEvent event) {
courses.setUserText(classTitle.getText());
}
});
Esto funcionó perfectamente (¡por primera vez!).
Comprobar http://dev.arcbees.com/gwtchosen/ se basa en GQuery –