Grouping Selection Mode Grid In Ext GWT Sample Code
- package com.extjs.gxt.samples.client.examples.grid;
- import java.util.ArrayList;
- import java.util.List;
- import com.extjs.gxt.samples.resources.client.Resources;
- import com.extjs.gxt.samples.resources.client.TestData;
- import com.extjs.gxt.samples.resources.client.model.Stock;
- import com.extjs.gxt.ui.client.Style.SelectionMode;
- import com.extjs.gxt.ui.client.core.El;
- import com.extjs.gxt.ui.client.data.ModelData;
- import com.extjs.gxt.ui.client.event.Events;
- import com.extjs.gxt.ui.client.event.FieldEvent;
- import com.extjs.gxt.ui.client.event.GridEvent;
- import com.extjs.gxt.ui.client.event.Listener;
- import com.extjs.gxt.ui.client.store.GroupingStore;
- import com.extjs.gxt.ui.client.widget.ContentPanel;
- import com.extjs.gxt.ui.client.widget.LayoutContainer;
- import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
- import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
- import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;
- import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
- import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
- import com.extjs.gxt.ui.client.widget.grid.Grid;
- import com.extjs.gxt.ui.client.widget.grid.GridGroupRenderer;
- import com.extjs.gxt.ui.client.widget.grid.GroupColumnData;
- import com.extjs.gxt.ui.client.widget.grid.GroupingView;
- import com.extjs.gxt.ui.client.widget.layout.FitLayout;
- import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
- import com.extjs.gxt.ui.client.widget.toolbar.LabelToolItem;
- import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
- import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
- import com.google.gwt.dom.client.NodeList;
- import com.google.gwt.i18n.client.DateTimeFormat;
- import com.google.gwt.user.client.Element;
- public class CheckGroupingGridExample extends LayoutContainer {
- private GroupingView view;
- private String checkedStyle = "x-grid3-group-check";
- private String uncheckedStyle = "x-grid3-group-uncheck";
- @Override
- protected void onRender(Element parent, int index) {
- super.onRender(parent, index);
- setLayout(new FlowLayout(10));
- GroupingStore<Stock> store = new GroupingStore<Stock>();
- store.setMonitorChanges(true);
- store.add(TestData.getCompanies());
- store.groupBy("industry");
- final CheckBoxSelectionModel<Stock> sm = new CheckBoxSelectionModel<Stock>() {
- @Override
- public void deselectAll() {
- super.deselectAll();
- NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();
- for (int i = 0; i < groups.getLength(); i++) {
- com.google.gwt.dom.client.Element group = groups.getItem(i).getFirstChildElement();
- setGroupChecked((Element)group, false);
- }
- }
- @Override
- public void selectAll() {
- super.selectAll();
- NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();
- for (int i = 0; i < groups.getLength(); i++) {
- com.google.gwt.dom.client.Element group = groups.getItem(i).getFirstChildElement();
- setGroupChecked((Element)group, true);
- }
- }
- @Override
- protected void doDeselect(List<Stock> models, boolean supressEvent) {
- super.doDeselect(models, supressEvent);
- NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();
- search : for (int i = 0; i < groups.getLength(); i++) {
- com.google.gwt.dom.client.Element group = groups.getItem(i);
- NodeList<Element> rows = El.fly(group).select(".x-grid3-row");
- for (int j = 0, len = rows.getLength(); j < len; j++) {
- Element r = rows.getItem(j);
- int idx = grid.getView().findRowIndex(r);
- Stock m = grid.getStore().getAt(idx);
- if (!isSelected(m)) {
- setGroupChecked((Element)group, false);
- continue search;
- }
- }
- }
- }
- @Override
- protected void doSelect(List<Stock> models, boolean keepExisting, boolean supressEvent) {
- super.doSelect(models, keepExisting, supressEvent);
- NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();
- search : for (int i = 0; i < groups.getLength(); i++) {
- com.google.gwt.dom.client.Element group = groups.getItem(i);
- NodeList<Element> rows = El.fly(group).select(".x-grid3-row");
- for (int j = 0, len = rows.getLength(); j < len; j++) {
- Element r = rows.getItem(j);
- int idx = grid.getView().findRowIndex(r);
- Stock m = grid.getStore().getAt(idx);
- if (!isSelected(m)) {
- continue search;
- }
- }
- setGroupChecked((Element)group, true);
- }
- }
- };
- ColumnConfig company = new ColumnConfig("name", "Company", 60);
- ColumnConfig price = new ColumnConfig("open", "Price", 20);
- ColumnConfig change = new ColumnConfig("change", "Change", 20);
- ColumnConfig industry = new ColumnConfig("industry", "Industry", 20);
- ColumnConfig last = new ColumnConfig("date", "Last Updated", 20);
- last.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));
- List<ColumnConfig> config = new ArrayList<ColumnConfig>();
- config.add(sm.getColumn());
- config.add(company);
- config.add(price);
- config.add(change);
- config.add(industry);
- config.add(last);
- final ColumnModel cm = new ColumnModel(config);
- view = new GroupingView() {
- @Override
- protected void onMouseDown(GridEvent<ModelData> ge) {
- El hd = ge.getTarget(".x-grid-group-hd", 10);
- El target = ge.getTargetEl();
- if (hd != null && target.hasStyleName(uncheckedStyle) || target.hasStyleName(checkedStyle)) {
- boolean checked = !ge.getTargetEl().hasStyleName(uncheckedStyle);
- checked = !checked;
- if (checked) {
- ge.getTargetEl().replaceStyleName(uncheckedStyle, checkedStyle);
- } else {
- ge.getTargetEl().replaceStyleName(checkedStyle, uncheckedStyle);
- }
- Element group = (Element) findGroup(ge.getTarget());
- if (group != null) {
- NodeList<Element> rows = El.fly(group).select(".x-grid3-row");
- List<ModelData> temp = new ArrayList<ModelData>();
- for (int i = 0; i < rows.getLength(); i++) {
- Element r = rows.getItem(i);
- int idx = findRowIndex(r);
- ModelData m = grid.getStore().getAt(idx);
- temp.add(m);
- }
- if (checked) {
- grid.getSelectionModel().select(temp, true);
- } else {
- grid.getSelectionModel().deselect(temp);
- }
- }
- return;
- }
- super.onMouseDown(ge);
- }
- };
- view.setShowGroupedColumn(false);
- view.setForceFit(true);
- view.setGroupRenderer(new GridGroupRenderer() {
- public String render(GroupColumnData data) {
- String f = cm.getColumnById(data.field).getHeader();
- String l = data.models.size() == 1 ? "Item" : "Items";
- return "<div class='x-grid3-group-checker'><div class='" + uncheckedStyle + "'> </div></div> " + f
- + ": " + data.group + " (" + data.models.size() + " " + l + ")";
- }
- });
- Grid<Stock> grid = new Grid<Stock>(store, cm);
- grid.setView(view);
- grid.setBorders(true);
- grid.addPlugin(sm);
- grid.setSelectionModel(sm);
- ContentPanel panel = new ContentPanel();
- panel.setHeading("Grouping Example");
- panel.setIcon(Resources.ICONS.table());
- panel.setCollapsible(true);
- panel.setFrame(true);
- panel.setSize(700, 450);
- panel.setLayout(new FitLayout());
- panel.add(grid);
- ToolBar toolBar = new ToolBar();
- toolBar.add(new LabelToolItem("Selection Mode: "));
- final SimpleComboBox<String> type = new SimpleComboBox<String>();
- type.setTriggerAction(TriggerAction.ALL);
- type.setEditable(false);
- type.setFireChangeEventOnSetValue(true);
- type.setWidth(100);
- type.add("Multi");
- type.add("Simple");
- type.setSimpleValue("Multi");
- type.addListener(Events.Change, new Listener<FieldEvent>() {
- public void handleEvent(FieldEvent be) {
- boolean simple = type.getSimpleValue().equals("Simple");
- sm.deselectAll();
- sm.setSelectionMode(simple ? SelectionMode.SIMPLE : SelectionMode.MULTI);
- }
- });
- toolBar.add(type);
- toolBar.add(new SeparatorToolItem());
- panel.setTopComponent(toolBar);
- add(panel);
- }
- private El findCheck(Element group) {
- return El.fly(group).selectNode(".x-grid3-group-checker").firstChild();
- }
- private void setGroupChecked(Element group, boolean checked) {
- findCheck(group).replaceStyleName(checked ? uncheckedStyle : checkedStyle, checked ? checkedStyle : uncheckedStyle);
- }
- }
Comments
Post a Comment