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.grid;
009:
010: import com.gwtext.client.core.SortDir;
011: import com.gwtext.client.core.TextAlign;
012: import com.gwtext.client.data.*;
013: import com.gwtext.client.util.DateUtil;
014: import com.gwtext.client.util.Format;
015: import com.gwtext.client.widgets.*;
016: import com.gwtext.client.widgets.event.ButtonListenerAdapter;
017: import com.gwtext.client.widgets.event.PanelListenerAdapter;
018: import com.gwtext.client.widgets.grid.*;
019: import com.gwtext.sample.showcase2.client.ShowcasePanel;
020:
021: import java.util.Date;
022:
023: public class RemotePagingSample extends ShowcasePanel {
024:
025: private GridPanel grid;
026: private boolean showPreview = true;
027:
028: private Renderer renderTopic = new Renderer() {
029: public String render(Object value, CellMetadata cellMetadata,
030: Record record, int rowIndex, int colNum, Store store) {
031: return Format
032: .format(
033: "<b><a href=\"http://extjs.com/forum/showthread.php?t={2}\" target=\"_blank\">{0}</a></b><a href=\"http://extjs.com/forum/forumdisplay.php?f={3}\" target=\"_blank\">{1} Forum</a>",
034: new String[] { (String) value,
035: record.getAsString("forumtitle"),
036: record.getId(),
037: record.getAsString("forumid"), });
038: }
039: };
040:
041: private Renderer renderLast = new Renderer() {
042: public String render(Object value, CellMetadata cellMetadata,
043: Record record, int rowIndex, int colNum, Store store) {
044: Date lastPost = record.getAsDate("lastpost");
045: String lastPostStr = DateUtil.format(lastPost,
046: "M j, Y, g:i a");
047: return Format.format("{0}<br/>by {1}", new String[] {
048: lastPostStr, record.getAsString("lastposter") });
049: }
050: };
051:
052: public String getSourceUrl() {
053: return "source/grid/RemotePagingSample.java.html";
054: }
055:
056: public Panel getViewPanel() {
057:
058: if (panel == null) {
059: DataProxy dataProxy = new ScriptTagProxy(
060: "http://extjs.com/forum/topics-browse-remote.php");
061:
062: final RecordDef recordDef = new RecordDef(new FieldDef[] {
063: new StringFieldDef("title"),
064: new StringFieldDef("forumtitle"),
065: new StringFieldDef("forumid"),
066: new StringFieldDef("author"),
067: new IntegerFieldDef("replycount"),
068: new DateFieldDef("lastpost", "lastpost",
069: "timestamp"),
070: new StringFieldDef("lastposter"),
071: new StringFieldDef("excerpt") });
072: JsonReader reader = new JsonReader(recordDef);
073: reader.setRoot("topics");
074: reader.setTotalProperty("totalCount");
075: reader.setId("threadid");
076:
077: final Store store = new Store(dataProxy, reader, true);
078: store.setDefaultSort("lastpost", SortDir.DESC);
079:
080: ColumnConfig topicColumn = new ColumnConfig("Topic",
081: "title", 420, false, renderTopic, "topic");
082: topicColumn.setCss("white-space:normal;");
083:
084: ColumnConfig authorColumn = new ColumnConfig("Author",
085: "author", 100);
086: authorColumn.setHidden(true);
087:
088: ColumnConfig repliesColumn = new ColumnConfig("Replies",
089: "replycount", 70);
090: repliesColumn.setAlign(TextAlign.RIGHT);
091:
092: ColumnConfig lastPostColumn = new ColumnConfig("Last Post",
093: "lastPost", 150, true, renderLast, "last");
094:
095: ColumnModel columnModel = new ColumnModel(
096: new ColumnConfig[] { topicColumn, authorColumn,
097: repliesColumn, lastPostColumn });
098: columnModel.setDefaultSortable(true);
099:
100: grid = new GridPanel();
101: grid.setWidth(700);
102: grid.setHeight(500);
103: grid.setTitle("Remote Paging Grid ");
104: grid.setStore(store);
105: grid.setColumnModel(columnModel);
106: grid.setTrackMouseOver(false);
107: grid.setLoadMask(true);
108: grid.setSelectionModel(new RowSelectionModel());
109: grid.setFrame(true);
110: grid.setStripeRows(true);
111: grid.setIconCls("grid-icon");
112:
113: GridView view = new GridView() {
114: public String getRowClass(Record record, int index,
115: RowParams rowParams, Store store) {
116: if (showPreview) {
117: rowParams.setBody(Format.format("<p>{0}</p>",
118: record.getAsString("excerpt")));
119: return "x-grid3-row-expanded";
120: } else {
121: return "x-grid3-row-collapsed";
122: }
123: }
124: };
125: view.setForceFit(true);
126: view.setEnableRowBody(true);
127: grid.setView(view);
128:
129: PagingToolbar pagingToolbar = new PagingToolbar(store);
130: pagingToolbar.setPageSize(25);
131: pagingToolbar.setDisplayInfo(true);
132: pagingToolbar
133: .setDisplayMsg("Displaying topics {0} - {1} of {2}");
134: pagingToolbar.setEmptyMsg("No topics to display");
135:
136: pagingToolbar.addSeparator();
137: ToolbarButton toolbarButton = new ToolbarButton(
138: "Show Preview");
139: toolbarButton.setPressed(showPreview);
140: toolbarButton.setEnableToggle(true);
141: toolbarButton.setCls("x-btn-text-icon details");
142: toolbarButton.addListener(new ButtonListenerAdapter() {
143: public void onToggle(Button button, boolean pressed) {
144: toggleDetails(pressed);
145: }
146: });
147:
148: pagingToolbar.addButton(toolbarButton);
149: grid.setBottomToolbar(pagingToolbar);
150:
151: grid.addListener(new PanelListenerAdapter() {
152: public void onRender(Component component) {
153: store.load(0, 25);
154: }
155: });
156:
157: panel = new Panel();
158: panel.add(grid);
159: }
160: return panel;
161: }
162:
163: private void toggleDetails(boolean pressed) {
164: showPreview = pressed;
165: grid.getView().refresh();
166: }
167:
168: public String getIntro() {
169: return "<p>In this example, the Grid is based on a Store that is populated using a Json web service that retrieves data from the ExtJS forums."
170: + "The Grid supports remote paging. It also has custom renderers to alter the display in normal and preview mode.</p>"
171: + "<p>Also notice how the preview text for each record spans all the columns. This is easily configurable by a simple property.</p>";
172: }
173: }
|