Skip to main content

Grouping Selection Mode Grid In Ext GWT

Grouping Selection Mode Grid In Ext GWT Sample Code


  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.SelectionMode;  
  10. import com.extjs.gxt.ui.client.core.El;  
  11. import com.extjs.gxt.ui.client.data.ModelData;  
  12. import com.extjs.gxt.ui.client.event.Events;  
  13. import com.extjs.gxt.ui.client.event.FieldEvent;  
  14. import com.extjs.gxt.ui.client.event.GridEvent;  
  15. import com.extjs.gxt.ui.client.event.Listener;  
  16. import com.extjs.gxt.ui.client.store.GroupingStore;  
  17. import com.extjs.gxt.ui.client.widget.ContentPanel;  
  18. import com.extjs.gxt.ui.client.widget.LayoutContainer;  
  19. import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;  
  20. import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;  
  21. import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;  
  22. import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;  
  23. import com.extjs.gxt.ui.client.widget.grid.ColumnModel;  
  24. import com.extjs.gxt.ui.client.widget.grid.Grid;  
  25. import com.extjs.gxt.ui.client.widget.grid.GridGroupRenderer;  
  26. import com.extjs.gxt.ui.client.widget.grid.GroupColumnData;  
  27. import com.extjs.gxt.ui.client.widget.grid.GroupingView;  
  28. import com.extjs.gxt.ui.client.widget.layout.FitLayout;  
  29. import com.extjs.gxt.ui.client.widget.layout.FlowLayout;  
  30. import com.extjs.gxt.ui.client.widget.toolbar.LabelToolItem;  
  31. import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;  
  32. import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;  
  33. import com.google.gwt.dom.client.NodeList;  
  34. import com.google.gwt.i18n.client.DateTimeFormat;  
  35. import com.google.gwt.user.client.Element;  
  36.   
  37. public class CheckGroupingGridExample extends LayoutContainer {  
  38.   
  39.   private GroupingView view;  
  40.   private String checkedStyle = "x-grid3-group-check";  
  41.   private String uncheckedStyle = "x-grid3-group-uncheck";  
  42.     
  43.   @Override  
  44.   protected void onRender(Element parent, int index) {  
  45.     super.onRender(parent, index);  
  46.   
  47.     setLayout(new FlowLayout(10));  
  48.   
  49.     GroupingStore<Stock> store = new GroupingStore<Stock>();  
  50.     store.setMonitorChanges(true);  
  51.     store.add(TestData.getCompanies());  
  52.     store.groupBy("industry");  
  53.   
  54.     final CheckBoxSelectionModel<Stock> sm = new CheckBoxSelectionModel<Stock>() {  
  55.       @Override  
  56.       public void deselectAll() {  
  57.         super.deselectAll();  
  58.         NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();  
  59.         for (int i = 0; i < groups.getLength(); i++) {  
  60.           com.google.gwt.dom.client.Element group = groups.getItem(i).getFirstChildElement();  
  61.           setGroupChecked((Element)group, false);  
  62.         }  
  63.       }  
  64.   
  65.       @Override  
  66.       public void selectAll() {  
  67.         super.selectAll();  
  68.         NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();  
  69.         for (int i = 0; i < groups.getLength(); i++) {  
  70.           com.google.gwt.dom.client.Element group = groups.getItem(i).getFirstChildElement();  
  71.           setGroupChecked((Element)group, true);  
  72.         }  
  73.       }  
  74.   
  75.       @Override  
  76.       protected void doDeselect(List<Stock> models, boolean supressEvent) {  
  77.         super.doDeselect(models, supressEvent);  
  78.         NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();  
  79.         search : for (int i = 0; i < groups.getLength(); i++) {  
  80.           com.google.gwt.dom.client.Element group = groups.getItem(i);  
  81.           NodeList<Element> rows = El.fly(group).select(".x-grid3-row");  
  82.           for (int j = 0, len = rows.getLength(); j < len; j++) {  
  83.             Element r = rows.getItem(j);  
  84.             int idx = grid.getView().findRowIndex(r);  
  85.             Stock m = grid.getStore().getAt(idx);  
  86.             if (!isSelected(m)) {  
  87.               setGroupChecked((Element)group, false);  
  88.               continue search;  
  89.             }  
  90.           }  
  91.         }  
  92.   
  93.       }  
  94.         
  95.       @Override  
  96.       protected void doSelect(List<Stock> models, boolean keepExisting, boolean supressEvent) {  
  97.         super.doSelect(models, keepExisting, supressEvent);  
  98.         NodeList<com.google.gwt.dom.client.Element> groups = view.getGroups();  
  99.         search : for (int i = 0; i < groups.getLength(); i++) {  
  100.           com.google.gwt.dom.client.Element group = groups.getItem(i);  
  101.           NodeList<Element> rows = El.fly(group).select(".x-grid3-row");  
  102.           for (int j = 0, len = rows.getLength(); j < len; j++) {  
  103.             Element r = rows.getItem(j);  
  104.             int idx = grid.getView().findRowIndex(r);  
  105.             Stock m = grid.getStore().getAt(idx);  
  106.             if (!isSelected(m)) {  
  107.               continue search;  
  108.             }  
  109.           }  
  110.           setGroupChecked((Element)group, true);  
  111.             
  112.         }  
  113.       }  
  114.     };  
  115.   
  116.     ColumnConfig company = new ColumnConfig("name""Company"60);  
  117.     ColumnConfig price = new ColumnConfig("open""Price"20);  
  118.     ColumnConfig change = new ColumnConfig("change""Change"20);  
  119.     ColumnConfig industry = new ColumnConfig("industry""Industry"20);  
  120.     ColumnConfig last = new ColumnConfig("date""Last Updated"20);  
  121.     last.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));  
  122.   
  123.     List<ColumnConfig> config = new ArrayList<ColumnConfig>();  
  124.     config.add(sm.getColumn());  
  125.     config.add(company);  
  126.     config.add(price);  
  127.     config.add(change);  
  128.     config.add(industry);  
  129.     config.add(last);  
  130.   
  131.     final ColumnModel cm = new ColumnModel(config);  
  132.   
  133.     view = new GroupingView() {  
  134.   
  135.       @Override  
  136.       protected void onMouseDown(GridEvent<ModelData> ge) {  
  137.         El hd = ge.getTarget(".x-grid-group-hd"10);  
  138.         El target = ge.getTargetEl();  
  139.         if (hd != null && target.hasStyleName(uncheckedStyle) || target.hasStyleName(checkedStyle)) {  
  140.           boolean checked = !ge.getTargetEl().hasStyleName(uncheckedStyle);  
  141.           checked = !checked;  
  142.           if (checked) {  
  143.             ge.getTargetEl().replaceStyleName(uncheckedStyle, checkedStyle);  
  144.           } else {  
  145.             ge.getTargetEl().replaceStyleName(checkedStyle, uncheckedStyle);  
  146.           }  
  147.   
  148.           Element group = (Element) findGroup(ge.getTarget());  
  149.           if (group != null) {  
  150.             NodeList<Element> rows = El.fly(group).select(".x-grid3-row");  
  151.             List<ModelData> temp = new ArrayList<ModelData>();  
  152.             for (int i = 0; i < rows.getLength(); i++) {  
  153.               Element r = rows.getItem(i);  
  154.               int idx = findRowIndex(r);  
  155.               ModelData m = grid.getStore().getAt(idx);  
  156.               temp.add(m);  
  157.             }  
  158.             if (checked) {  
  159.               grid.getSelectionModel().select(temp, true);  
  160.             } else {  
  161.               grid.getSelectionModel().deselect(temp);  
  162.             }  
  163.           }  
  164.           return;  
  165.         }  
  166.         super.onMouseDown(ge);  
  167.       }  
  168.   
  169.     };  
  170.     view.setShowGroupedColumn(false);  
  171.     view.setForceFit(true);  
  172.     view.setGroupRenderer(new GridGroupRenderer() {  
  173.       public String render(GroupColumnData data) {  
  174.         String f = cm.getColumnById(data.field).getHeader();  
  175.         String l = data.models.size() == 1 ? "Item" : "Items";  
  176.         return "<div class='x-grid3-group-checker'><div class='" + uncheckedStyle + "'> </div></div> " + f  
  177.             + ": " + data.group + " (" + data.models.size() + " " + l + ")";  
  178.       }  
  179.     });  
  180.   
  181.     Grid<Stock> grid = new Grid<Stock>(store, cm);  
  182.     grid.setView(view);  
  183.     grid.setBorders(true);  
  184.     grid.addPlugin(sm);  
  185.     grid.setSelectionModel(sm);  
  186.   
  187.     ContentPanel panel = new ContentPanel();  
  188.     panel.setHeading("Grouping Example");  
  189.     panel.setIcon(Resources.ICONS.table());  
  190.     panel.setCollapsible(true);  
  191.     panel.setFrame(true);  
  192.     panel.setSize(700450);  
  193.     panel.setLayout(new FitLayout());  
  194.     panel.add(grid);  
  195.       
  196.     ToolBar toolBar = new ToolBar();  
  197.     toolBar.add(new LabelToolItem("Selection Mode: "));  
  198.     final SimpleComboBox<String> type = new SimpleComboBox<String>();  
  199.     type.setTriggerAction(TriggerAction.ALL);  
  200.     type.setEditable(false);  
  201.     type.setFireChangeEventOnSetValue(true);  
  202.     type.setWidth(100);  
  203.     type.add("Multi");  
  204.     type.add("Simple");  
  205.     type.setSimpleValue("Multi");  
  206.     type.addListener(Events.Change, new Listener<FieldEvent>() {  
  207.       public void handleEvent(FieldEvent be) {  
  208.         boolean simple = type.getSimpleValue().equals("Simple");  
  209.         sm.deselectAll();  
  210.         sm.setSelectionMode(simple ? SelectionMode.SIMPLE : SelectionMode.MULTI);  
  211.       }  
  212.     });  
  213.   
  214.     toolBar.add(type);  
  215.     toolBar.add(new SeparatorToolItem());  
  216.     panel.setTopComponent(toolBar);  
  217.   
  218.     add(panel);  
  219.   }  
  220.     
  221.   private El findCheck(Element group) {  
  222.     return El.fly(group).selectNode(".x-grid3-group-checker").firstChild();  
  223.   }  
  224.     
  225.   private void setGroupChecked(Element group, boolean checked) {  
  226.     findCheck(group).replaceStyleName(checked ? uncheckedStyle : checkedStyle, checked ? checkedStyle : uncheckedStyle);  
  227.   }  
  228.   
  229. }  

Comments

Popular posts from this blog

Gradle project sync failed. Basic functionality (e.g, editing, debugging) will not work properly.

Gradle is an open source build tool which help us to accelerate developer productivity. Go to Gradle Services website(http://services.gradle.org/distributions/) and download the latest version Download the latest version gradle-4.7-rc-1-all.zip ( Latest version while writing this article) and you can download greater than 4.7 if available and make sure the zip file contains "all" keyword (gradle-*.*-rc-*-all.zip). Go to your download location and unzip the downloaded file Android Studio > File >  Settings > Build, Execution, Deployment  Gradle Project-level settings -> Select Use local gradle distribution -> Select the unzip folder of downloaded gradle version -> Click OK button to exit from the Settings window. Please Wait until Gradle build completes and your problem have been resolved.   If gradle build failed, follow few more steps to get resolved Final step to resolve this error Go to your project -> Gradle script ->

What is GMMXlE (Google Doodle)?

In every celebration Google does something to their Logo to make it doodle but that could be easy to read Google name made it under that logo but this time they have made it Doodle for the new year Eve 2011 which is GMMXlE . This Doodle is a great brain teaser for all the people to find out what it is. What Is GMMXlE? The First G and Last E stands For Google Logo First Character and Last Character i.e GE( G oogl e ). And MMXl is a Roman Letter for 2011. Roman Letter Values For Appropriate Letters M Stands For 1000 X Stands For 10 l Stands For 1 Apply these values Under this Formula To Turn it Into 2011 MMXl 2MXl 2(1000)+(10)+1 2011 Finally It is GMMXlE-G2011E

Form Input Widget on Flutter Android - Text, Slider, Switch, Date Picker, Buttons & Check Box

  Learn how you can use the different Form Input Widget on Flutter Android - Text, Slider, Switch, Date Picker, Buttons & Check Box This Application will give a basic idea like how you can create different widgets for the form panel designing. Video Tutorial import 'package:flutter/material.dart'; import 'package:intl/intl.dart' as intl; class FormWidgetsDemo extends StatefulWidget { const FormWidgetsDemo({super.key}); @override State createState() => _FormWidgetsDemoState(); } class _FormWidgetsDemoState extends State { final _formKey = GlobalKey (); DateTime date = DateTime.now(); double maxValue = 0; bool? checkBoxFeature = false; bool sliderFeature = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Hakeem Innovation Technology'), ), body: Form( key: _formKey, child: Scrollbar( child: Align( ali