Column Grouping 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.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.Style.HorizontalAlignment;  
10. import com.extjs.gxt.ui.client.event.ButtonEvent;  
11. import com.extjs.gxt.ui.client.event.Events;  
12. import com.extjs.gxt.ui.client.event.Listener;  
13. import com.extjs.gxt.ui.client.store.ListStore;  
14. import com.extjs.gxt.ui.client.widget.ContentPanel;  
15. import com.extjs.gxt.ui.client.widget.LayoutContainer;  
16. import com.extjs.gxt.ui.client.widget.Slider;  
17. import com.extjs.gxt.ui.client.widget.VerticalPanel;  
18. import com.extjs.gxt.ui.client.widget.button.Button;  
19. import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;  
20. import com.extjs.gxt.ui.client.widget.grid.ColumnData;  
21. import com.extjs.gxt.ui.client.widget.grid.ColumnModel;  
22. import com.extjs.gxt.ui.client.widget.grid.Grid;  
23. import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;  
24. import com.extjs.gxt.ui.client.widget.grid.HeaderGroupConfig;  
25. import com.extjs.gxt.ui.client.widget.layout.FitLayout;  
26. import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer;  
27. import com.google.gwt.i18n.client.DateTimeFormat;  
28. import com.google.gwt.i18n.client.NumberFormat;  
29. import com.google.gwt.user.client.Element;  
30. import com.google.gwt.user.client.ui.FlexTable;  
31. public class ColumnGroupingExample extends LayoutContainer {  
32.   
33.   private NumberFormat currency = NumberFormat.getCurrencyFormat();  
34.   private NumberFormat number = NumberFormat.getFormat("0.00");  
35.   private NumberCellRenderer<Grid<Stock>> numberRenderer;  
36.   private GridCellRenderer<Stock> change;  
37.   private GridCellRenderer<Stock> gridNumber;  
38.   private VerticalPanel vp;  
39.   
40.   @Override  
41.   protected void onRender(Element parent, int index) {  
42.     super.onRender(parent, index);  
43.     numberRenderer = new NumberCellRenderer<Grid<Stock>>(currency);  
44.     change = new GridCellRenderer<Stock>() {  
45.       public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,  
46.           ListStore<Stock> store, Grid<Stock> grid) {  
47.         double val = (Double) model.get(property);  
48.         String style = val < 0 ? "red" : "green";  
49.         return "<span style='color:" + style + "'>" + number.format(val) + "</span>";  
50.       }  
51.     };  
52.   
53.     gridNumber = new GridCellRenderer<Stock>() {  
54.       public String render(Stock model, String property, ColumnData config, int rowIndex, int colIndex,  
55.           ListStore<Stock> store, Grid<Stock> grid) {  
56.         return numberRenderer.render(null, property, model.get(property));  
57.       }  
58.     };  
59.   
60.     vp = new VerticalPanel();  
61.     vp.setSpacing(20);  
62.   
63.     createGrid(false);  
64.     createGrid(true);  
65.   
66.     add(vp);  
67.   }  
68.   
69.   private void createGrid(boolean widget) {  
70.     List<ColumnConfig> configs = new ArrayList<ColumnConfig>();  
71.   
72.     ColumnConfig column = new ColumnConfig();  
73.     column.setId("name");  
74.     column.setHeader("Company");  
75.     column.setWidth(200);  
76.     configs.add(column);  
77.   
78.     column = new ColumnConfig();  
79.     column.setId("symbol");  
80.     column.setHeader("Symbol");  
81.     column.setWidth(100);  
82.     configs.add(column);  
83.   
84.     column = new ColumnConfig();  
85.     column.setId("last");  
86.     column.setHeader("Last");  
87.     column.setAlignment(HorizontalAlignment.RIGHT);  
88.     column.setWidth(75);  
89.     column.setRenderer(gridNumber);  
90.     configs.add(column);  
91.   
92.     column = new ColumnConfig("change", "Change", 100);  
93.     column.setAlignment(HorizontalAlignment.RIGHT);  
94.     column.setRenderer(change);  
95.     configs.add(column);  
96.   
97.     column = new ColumnConfig("date", 125);  
98.     if (widget) {  
99.       Button btn = new Button("Updated");  
100.       btn.addListener(Events.OnClick, new Listener<ButtonEvent>() {  
101.         public void handleEvent(ButtonEvent be) {  
102.           // stop column from getting click and causing sort  
103.           be.cancelBubble();  
104.         }  
105.       });  
106.       btn.setStyleAttribute("float", "left");  
107.       column.setWidget(btn, "Last Updated");  
108.     } else {  
109.       column.setAlignment(HorizontalAlignment.RIGHT);  
110.       column.setHeader("Last Updated");  
111.     }  
112.   
113.     column.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/yyyy"));  
114.     configs.add(column);  
115.   
116.     ListStore<Stock> store = new ListStore<Stock>();  
117.     store.add(TestData.getStocks());  
118.   
119.     ColumnModel cm = new ColumnModel(configs);  
120.   
121.     cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Header Grouping Example", 1, 5));  
122.     cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2));  
123.   
124.     if (widget) {  
125.       Slider s = new Slider();  
126.       s.setWidth(100);  
127.   
128.       // ugly, but centers slider  
129.       FlexTable tbl = new FlexTable();  
130.       tbl.setWidth("100%");  
131.       tbl.setHTML(0, 0, " ");  
132.       tbl.setHTML(0, 1, "<span style='white-space: nowrap;font-size: 11px'>Slide Me:  </span>");  
133.       tbl.setWidget(0, 2, s);  
134.       tbl.setHTML(0, 3, " ");  
135.       tbl.getCellFormatter().setWidth(0, 0, "50%");  
136.       tbl.getCellFormatter().setWidth(0, 3, "50%");  
137.       cm.addHeaderGroup(1, 0, new HeaderGroupConfig(tbl, 1, 2));  
138.     } else {  
139.       cm.addHeaderGroup(1, 0, new HeaderGroupConfig("Stock Information", 1, 2));  
140.     }  
141.   
142.     ContentPanel cp = new ContentPanel();  
143.     cp.setBodyBorder(false);  
144.     cp.setIcon(Resources.ICONS.table());  
145.     cp.setHeading(widget ? "Column Grouping with Widget" : "Column Grouping");  
146.     cp.setButtonAlign(HorizontalAlignment.CENTER);  
147.     cp.setLayout(new FitLayout());  
148.     cp.setSize(600, 300);  
149.   
150.     Grid<Stock> grid = new Grid<Stock>(store, cm);  
151.     grid.setStyleAttribute("borderTop", "none");  
152.     grid.getView().setForceFit(true);  
153.     grid.setBorders(true);  
154.     cp.add(grid);  
155.   
156.     vp.add(cp);  
157.   }  
158. }  

Posted by SKILLS DEVELOPEMENT

For Further Reading,