001: /*
002: * GWT-Ext Widget Library
003: * Copyright(c) 2007-2008, GWT-Ext.
004: * licensing@gwt-ext.com
005: *
006: * http://www.gwt-ext.com/license
007: */
008: package com.gwtext.sample.showcase2.client.combo;
009:
010: import com.google.gwt.user.client.Window;
011: import com.gwtext.client.data.*;
012: import com.gwtext.client.util.Format;
013: import com.gwtext.client.widgets.Panel;
014: import com.gwtext.client.widgets.form.ComboBox;
015: import com.gwtext.client.widgets.form.FormPanel;
016: import com.gwtext.client.widgets.form.event.ComboBoxListenerAdapter;
017: import com.gwtext.sample.showcase2.client.ShowcasePanel;
018:
019: /**
020: * Styled ComboBox that gets data from a remote Json web service.
021: */
022: public class LiveSearchSample extends ShowcasePanel {
023:
024: public String getSourceUrl() {
025: return "source/combo/LiveSearchSample.java.html";
026: }
027:
028: public Panel getViewPanel() {
029: if (panel == null) {
030: panel = new Panel();
031: panel.setId("livesearch");
032:
033: //Use a ScriptTagProxy because you are getting data from a different domain using
034: //a Json web service. If getting data from your own domain, then should use HttpProxy
035: DataProxy dataProxy = new ScriptTagProxy(
036: "http://extjs.com/forum/topics-remote.php");
037:
038: RecordDef recordDef = new RecordDef(new FieldDef[] {
039: new StringFieldDef("title", "topic_title"),
040: new StringFieldDef("topicId", "topic_id"),
041: new StringFieldDef("author", "author"),
042: new DateFieldDef("lastPost", "post_time",
043: "timestamp"),
044: new StringFieldDef("excerpt", "post_text") });
045:
046: JsonReader reader = new JsonReader(recordDef);
047: reader.setRoot("topics");
048: reader.setTotalProperty("totalCount");
049: reader.setId("post_id");
050:
051: final Store store = new Store(dataProxy, reader);
052: store.load();
053:
054: final String resultTpl = "<div class=\"search-item\"><h3><span>{lastPost:date(\"M j, Y\")}<br />"
055: + "by {author}</span>{title}</h3>{excerpt}</div>";
056:
057: ComboBox cb = new ComboBox();
058: cb.setStore(store);
059: cb.setDisplayField("title");
060: cb.setTypeAhead(false);
061: cb.setLoadingText("Searching...");
062: cb.setWidth(440);
063: cb.setPageSize(10);
064: cb.setHideTrigger(true);
065: cb.setTpl(resultTpl);
066: cb.setMode(ComboBox.REMOTE);
067: cb.setTitle("ExtJS Forums");
068: cb.setHideLabel(true);
069: cb.setItemSelector("div.search-item");
070:
071: cb.addListener(new ComboBoxListenerAdapter() {
072: public void onSelect(ComboBox comboBox, Record record,
073: int index) {
074: String[] args = new String[] {
075: record.getAsString("topicId"),
076: record.getId() };
077: String url = Format
078: .format(
079: "http://extjs.com/forum/showthread.php?t={0}&p={1}",
080: args);
081: Window.open(url, "forum", "");
082: }
083: });
084:
085: Panel searchPanel = new Panel();
086: searchPanel.setWidth(490);
087: searchPanel.setHeight(150);
088: searchPanel.setPaddings(20);
089: searchPanel.setTitle("Search ExtJS Forums");
090: searchPanel.setFrame(true);
091:
092: FormPanel form = new FormPanel();
093: form.setBorder(false);
094: form.add(cb);
095: searchPanel.add(form);
096:
097: Panel instructionPanel = new Panel();
098: instructionPanel.setBorder(false);
099: instructionPanel.setPaddings(4, 0, 0, 0);
100: instructionPanel
101: .setHtml("Live search requires a minimum of 4 characters.");
102: searchPanel.add(instructionPanel);
103:
104: panel.add(searchPanel);
105: }
106: return panel;
107: }
108:
109: public String getIntro() {
110: return "<p>\n"
111: + " <b>Combo with Templates & Ajax</b>\n"
112: + " <p>This is a more advanced example that shows how you can combine paging, Template and a remote data store\n"
113: + " to create a \"live search\" feature.</p><p>Live search requires a minimum of 4 characters.</p>\n"
114: + " <p>This examples calls a Json Webservice to retreive data from the ExtJS forums and populate the Store backing the ComboBox.</p>"
115: + "</p>";
116: }
117:
118: }
|