Skip to main content

Grouping Selection Mode Grid In Ext GWT

By
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(700, 450);  
  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. }  
Labels:

Comments

Post a Comment

Popular posts from this blog

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

By
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 -...
3 comments
Continue Reading

How to Send Secured Data in Internet - Steganography

By
Image Description: Hackers Growth of Science and Technology finds innovative ways to find patches over attacks made by hacker.In the Internet there are millions of computer are interconnected by network.If some people want to share some personal things like bank accounts or premium login accounts through email or any other share media but hacker who is surfing anonymously in the Internet find the personal documents and trying to modify the original message as well utilizing the original message so that the receiver who receive fake message from hacker thought that the message sended by sender.. In order to confuse hackers technology made another innovation in new technique called "Steganography" What is Steganography? Steganography is new technology innovation which hides text messages in image,audio,text and video files To Make your data very securely just what you need to do is find the best steganography software from Internet and download it and then encrypt your me...
Post a Comment
Continue Reading

Spring Boot GraphQL Save, Update and Delete - Database MutationMapping

By
Learn how to get started with Graphql using spring boot framework. In this session, you will be learning like how to add the schema details and mapping the function and request payload with Graphql @MutationMapping into your controller class. So you can preform like Save, update and delete operation using graphql You need Spring web, JPA, Mysql, Lombok and Spring Graphql dependencies to your pom module. schema.graphqls (This file should be created inside the resources/graphql folder) type Query{ findAll: [User] userById(id: ID): User } type User{ id: ID name: String gender: String emailId: String } type Mutation{ addUser(userDetails: UserDetails): User updateUser(userDetails: UserDetails): User deleteUser(id: ID): String } input UserDetails{ id: ID name: String gender: String emailId: String } UserGQLController .java package com.hakeemit.graphql.controller; import com.hakeemit.graphql.entity.User; import com.hakeemit.gra...
Post a Comment
Continue Reading