Basic Grid Example -EXT GWT Source Code

1. package com.extjs.gxt.samples.client.examples.grid;
3. import java.util.ArrayList;
4. import java.util.List;
6. import com.extjs.gxt.samples.resources.client.Resources;
7. import com.extjs.gxt.samples.resources.client.TestData;
8. import com.extjs.gxt.samples.resources.client.model.Stock;
9. import com.extjs.gxt.ui.client.GXT;
10. import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
11. import com.extjs.gxt.ui.client.event.Events;
12. import com.extjs.gxt.ui.client.event.FieldEvent;
13. import com.extjs.gxt.ui.client.event.Listener;
14. import com.extjs.gxt.ui.client.store.ListStore;
15. import com.extjs.gxt.ui.client.widget.ContentPanel;
16. import com.extjs.gxt.ui.client.widget.LayoutContainer;
17. import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
18. import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
19. import com.extjs.gxt.ui.client.widget.grid.CellSelectionModel;
20. import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
21. import com.extjs.gxt.ui.client.widget.grid.ColumnData;
22. import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
23. import com.extjs.gxt.ui.client.widget.grid.Grid;
24. import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
25. import com.extjs.gxt.ui.client.widget.grid.GridSelectionModel;
26. import com.extjs.gxt.ui.client.widget.layout.FitLayout;
27. import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
28. import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer;
29. import com.extjs.gxt.ui.client.widget.tips.QuickTip;
30. import com.extjs.gxt.ui.client.widget.toolbar.LabelToolItem;
31. import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
32. import com.google.gwt.i18n.client.DateTimeFormat;
33. import com.google.gwt.i18n.client.NumberFormat;
34. import com.google.gwt.user.client.Element;
35. public class GridExample extends LayoutContainer {
37. private ColumnModel cm;
39. @Override
40. protected void onRender(Element parent, int index) {
41. super.onRender(parent, index);
42. setLayout(new FlowLayout(10));
43. getAriaSupport().setPresentation(true);
45. final NumberFormat currency = NumberFormat.getCurrencyFormat();
46. final NumberFormat number = NumberFormat.getFormat("0.00");
47. final NumberCellRenderer> numberRenderer = new NumberCellRenderer>(currency);
49. GridCellRenderer change = new GridCellRenderer() {
50. public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,
51. ListStore store, Grid grid) {
52. double val = (Double) model.get(property);
53. String style = val < 0 ? "red" : GXT.isHighContrastMode ? "#00ff5a" : "green";
54. String v = number.format(val);
56. return "" + v + "";
57. }
58. };
60. GridCellRenderer gridNumber = new GridCellRenderer() {
61. public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,
62. ListStore store, Grid grid) {
63. return numberRenderer.render(null, property, model.get(property));
64. }
65. };
67. List configs = new ArrayList();
69. ColumnConfig column = new ColumnConfig();
70. column.setId("name");
71. column.setHeader("Company");
72. column.setWidth(200);
73. column.setRowHeader(true);
74. configs.add(column);
76. column = new ColumnConfig();
77. column.setId("symbol");
78. column.setHeader("Symbol");
79. column.setWidth(100);
80. configs.add(column);
82. column = new ColumnConfig();
83. column.setId("last");
84. column.setHeader("Last");
85. column.setAlignment(HorizontalAlignment.RIGHT);
86. column.setWidth(75);
87. column.setRenderer(gridNumber);
88. configs.add(column);
90. column = new ColumnConfig("change", "Change", 100);
91. column.setAlignment(HorizontalAlignment.RIGHT);
92. column.setRenderer(change);
93. configs.add(column);
95. column = new ColumnConfig("date", "Last Updated", 100);
96. column.setAlignment(HorizontalAlignment.RIGHT);
97. column.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/yyyy"));
98. configs.add(column);
100. ListStore store = new ListStore();
101. store.add(TestData.getStocks());
103. cm = new ColumnModel(configs);
105. ContentPanel cp = new ContentPanel();
106. cp.setBodyBorder(true);
107. cp.setIcon(Resources.ICONS.table());
108. cp.setHeading("Basic Grid");
109. cp.setButtonAlign(HorizontalAlignment.CENTER);
110. cp.setLayout(new FitLayout());
111. cp.getHeader().setIconAltText("Grid Icon");
112. cp.setSize(600, 300);
114. final Grid grid = new Grid(store, cm);
115. grid.setStyleAttribute("borderTop", "none");
116. grid.setAutoExpandColumn("name");
117. grid.setBorders(false);
118. grid.setStripeRows(true);
119. grid.setColumnLines(true);
120. grid.setColumnReordering(true);
121. grid.getAriaSupport().setLabelledBy(cp.getHeader().getId() + "-label");
122. cp.add(grid);
124. ToolBar toolBar = new ToolBar();
125. toolBar.getAriaSupport().setLabel("Grid Options");
127. toolBar.add(new LabelToolItem("Selection Mode: "));
128. final SimpleComboBox type = new SimpleComboBox();
129. type.getAriaSupport().setLabelledBy(toolBar.getItem(0).getId());
130. type.setTriggerAction(TriggerAction.ALL);
131. type.setEditable(false);
132. type.setFireChangeEventOnSetValue(true);
133. type.setWidth(100);
134. type.add("Row");
135. type.add("Cell");
136. type.setSimpleValue("Row");
137. type.addListener(Events.Change, new Listener() {
138. public void handleEvent(FieldEvent be) {
139. boolean cell = type.getSimpleValue().equals("Cell");
140. grid.getSelectionModel().deselectAll();
141. if (cell) {
142. grid.setSelectionModel(new CellSelectionModel());
143. } else {
144. grid.setSelectionModel(new GridSelectionModel());
145. }
146. }
147. });
148. toolBar.add(type);
150. cp.setTopComponent(toolBar);
152. add(cp);
154. // needed to enable quicktips (qtitle for the heading and qtip for the
155. // content) that are setup in the change GridCellRenderer
156. new QuickTip(grid);
157. }
159. }

Posted by SKILLS DEVELOPEMENT

For Further Reading,

Ext GWT, GWT