Remote Filter Grid Example in Ext GWT

1. package com.extjs.gxt.samples.client.examples.grid;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import com.extjs.gxt.samples.client.ExampleServiceAsync;  
7. import com.extjs.gxt.samples.client.Examples;  
8. import com.extjs.gxt.samples.resources.client.Resources;  
9. import com.extjs.gxt.samples.resources.client.model.Stock;  
10. import com.extjs.gxt.ui.client.GXT;  
11. import com.extjs.gxt.ui.client.Registry;  
12. import com.extjs.gxt.ui.client.Style.HorizontalAlignment;  
13. import com.extjs.gxt.ui.client.data.BaseFilterPagingLoadConfig;  
14. import com.extjs.gxt.ui.client.data.BaseModelData;  
15. import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;  
16. import com.extjs.gxt.ui.client.data.BasePagingLoader;  
17. import com.extjs.gxt.ui.client.data.FilterPagingLoadConfig;  
18. import com.extjs.gxt.ui.client.data.ModelData;  
19. import com.extjs.gxt.ui.client.data.PagingLoadResult;  
20. import com.extjs.gxt.ui.client.data.PagingLoader;  
21. import com.extjs.gxt.ui.client.data.RpcProxy;  
22. import com.extjs.gxt.ui.client.event.BaseEvent;  
23. import com.extjs.gxt.ui.client.event.Events;  
24. import com.extjs.gxt.ui.client.event.Listener;  
25. import com.extjs.gxt.ui.client.store.ListStore;  
26. import com.extjs.gxt.ui.client.widget.ContentPanel;  
27. import com.extjs.gxt.ui.client.widget.LayoutContainer;  
28. import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;  
29. import com.extjs.gxt.ui.client.widget.grid.ColumnData;  
30. import com.extjs.gxt.ui.client.widget.grid.ColumnModel;  
31. import com.extjs.gxt.ui.client.widget.grid.Grid;  
32. import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;  
33. import com.extjs.gxt.ui.client.widget.grid.filters.BooleanFilter;  
34. import com.extjs.gxt.ui.client.widget.grid.filters.DateFilter;  
35. import com.extjs.gxt.ui.client.widget.grid.filters.GridFilters;  
36. import com.extjs.gxt.ui.client.widget.grid.filters.ListFilter;  
37. import com.extjs.gxt.ui.client.widget.grid.filters.NumericFilter;  
38. import com.extjs.gxt.ui.client.widget.grid.filters.StringFilter;  
39. import com.extjs.gxt.ui.client.widget.layout.FitLayout;  
40. import com.extjs.gxt.ui.client.widget.layout.FlowLayout;  
41. import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer;  
42. import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;  
43. import com.google.gwt.i18n.client.DateTimeFormat;  
44. import com.google.gwt.i18n.client.NumberFormat;  
45. import com.google.gwt.user.client.Element;  
46. import com.google.gwt.user.client.rpc.AsyncCallback;  
47.   
48. public class RemoteFilterGridExample extends LayoutContainer {  
49.   
50.   @Override  
51.   protected void onRender(Element parent, int index) {  
52.     super.onRender(parent, index);  
53.     setLayout(new FlowLayout(10));  
54.     getAriaSupport().setPresentation(true);  
55.   
56.     final ExampleServiceAsync service = (ExampleServiceAsync) Registry.get(Examples.SERVICE);  
57.   
58.     RpcProxy<PagingLoadResult<Stock>> proxy = new RpcProxy<PagingLoadResult<Stock>>() {  
59.       @Override  
60.       public void load(Object loadConfig, AsyncCallback<PagingLoadResult<Stock>> callback) {  
61.         service.getStocks((FilterPagingLoadConfig) loadConfig, callback);  
62.       }  
63.     };  
64.   
65.     // loader  
66.     final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy) {  
67.       @Override  
68.       protected Object newLoadConfig() {  
69.         BasePagingLoadConfig config = new BaseFilterPagingLoadConfig();  
70.         return config;  
71.       }  
72.   
73.     };  
74.     loader.setRemoteSort(true);  
75.   
76.     ListStore<Stock> store = new ListStore<Stock>(loader);  
77.   
78.     final NumberFormat currency = NumberFormat.getCurrencyFormat();  
79.     final NumberFormat number = NumberFormat.getFormat("0.00");  
80.     final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>(currency);  
81.   
82.     GridCellRenderer<Stock> change = new GridCellRenderer<Stock>() {  
83.       public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,  
84.           ListStore<Stock> store, Grid<Stock> grid) {  
85.         double val = (Double) model.get(property);  
86.         String style = val < 0 ? "red" : GXT.isHighContrastMode ? "#00ff5a" : "green";  
87.         return "<span style='font-weight: bold;color:" + style + "'>" + number.format(val) + "</span>";  
88.       }  
89.     };  
90.   
91.     GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() {  
92.       public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,  
93.           ListStore<Stock> store, Grid<Stock> grid) {  
94.         return numberRenderer.render(null, property, model.get(property));  
95.       }  
96.     };  
97.   
98.     List<ColumnConfig> configs = new ArrayList<ColumnConfig>();  
99.   
100.     ColumnConfig column = new ColumnConfig();  
101.     column.setId("name");  
102.     column.setHeader("Company");  
103.     column.setWidth(200);  
104.     configs.add(column);  
105.   
106.     column = new ColumnConfig();  
107.     column.setId("symbol");  
108.     column.setHeader("Symbol");  
109.     column.setWidth(100);  
110.     configs.add(column);  
111.   
112.     column = new ColumnConfig();  
113.     column.setId("last");  
114.     column.setHeader("Last");  
115.     column.setAlignment(HorizontalAlignment.RIGHT);  
116.     column.setWidth(100);  
117.     column.setRenderer(gridNumber);  
118.     configs.add(column);  
119.   
120.     column = new ColumnConfig("change", "Change", 100);  
121.     column.setAlignment(HorizontalAlignment.RIGHT);  
122.     column.setRenderer(change);  
123.     configs.add(column);  
124.   
125.     column = new ColumnConfig("date", "Last Updated", 120);  
126.     column.setAlignment(HorizontalAlignment.RIGHT);  
127.     column.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/yyyy"));  
128.     configs.add(column);  
129.   
130.     column = new ColumnConfig("split", "Split", 75);  
131.     column.setRenderer(new GridCellRenderer<Stock>() {  
132.       public Object render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,  
133.           ListStore<Stock> store, Grid<Stock> grid) {  
134.         Boolean b = model.get(property);  
135.         return b != null && b.booleanValue() ? "Yes" : "No";  
136.       }  
137.     });  
138.     configs.add(column);  
139.   
140.     column = new ColumnConfig("type", "Type", 75);  
141.     configs.add(column);  
142.   
143.     ColumnModel cm = new ColumnModel(configs);  
144.   
145.     ContentPanel cp = new ContentPanel();  
146.     cp.setBodyBorder(true);  
147.     cp.setIcon(Resources.ICONS.table());  
148.     cp.setHeading("Remote Filter Grid");  
149.     cp.setButtonAlign(HorizontalAlignment.CENTER);  
150.     cp.setLayout(new FitLayout());  
151.     cp.setSize(660, 300);  
152.   
153.     GridFilters filters = new GridFilters();  
154.     NumericFilter last = new NumericFilter("last");  
155.     NumericFilter filter = new NumericFilter("change");  
156.     StringFilter nameFilter = new StringFilter("name");  
157.     DateFilter dateFilter = new DateFilter("date");  
158.     BooleanFilter booleanFilter = new BooleanFilter("split");  
159.   
160.     ListStore<ModelData> typeStore = new ListStore<ModelData>();  
161.     typeStore.add(type("Auto"));  
162.     typeStore.add(type("Media"));  
163.     typeStore.add(type("Medical"));  
164.     typeStore.add(type("Tech"));  
165.     ListFilter listFilter = new ListFilter("type", typeStore);  
166.     listFilter.setDisplayProperty("type");  
167.   
168.     filters.addFilter(last);  
169.     filters.addFilter(nameFilter);  
170.     filters.addFilter(filter);  
171.     filters.addFilter(dateFilter);  
172.     filters.addFilter(booleanFilter);  
173.     filters.addFilter(listFilter);  
174.   
175.     final Grid<Stock> grid = new Grid<Stock>(store, cm);  
176.     grid.addListener(Events.Attach, new Listener<BaseEvent>() {  
177.       public void handleEvent(BaseEvent be) {  
178.         loader.load(0, 25);  
179.       }  
180.     });  
181.     grid.getView().setForceFit(true);  
182.     grid.setStyleAttribute("borderTop", "none");  
183.     grid.setAutoExpandColumn("name");  
184.     grid.setBorders(false);  
185.     grid.setStripeRows(true);  
186.     grid.setColumnLines(true);  
187.     grid.addPlugin(filters);  
188.     cp.add(grid);  
189.   
190.     final PagingToolBar toolBar = new PagingToolBar(25);  
191.     toolBar.bind(loader);  
192.   
193.     cp.setBottomComponent(toolBar);  
194.   
195.     add(cp);  
196.   }  
197.   
198.   private ModelData type(String type) {  
199.     ModelData model = new BaseModelData();  
200.     model.set("type", type);  
201.     return model;  
202.   }  
203.   
204. }  

Posted by SKILLS DEVELOPEMENT

For Further Reading,