Collapse "Group Header" and "Summary" in single row

**joseaio** · 20 Aug 2010 8:41 AM

I think this (mini) hack is very interesting

Code:

            .x-grid-group-collapsed .x-grid-group-hd .x-grid-group-title {
                position: absolute;
                float: left;
            }

See images (collapsed and expanded), see summary row goes to header (when collapsed) and goes to end (when expanded)

All groups (and sumaries collapsed): in three rows

colapse-group.png

Expand first group (see how totals go to end of group):

expanded-group.png

**divyendu** · 14 Sep 2010 8:51 AM

this does not work with the code in examples.....not with extjs 2.x.

this is the html code:

Code:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Grid3 Group Summary Plugin</title>
   
      <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   
      <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->
   
      <script type="text/javascript" src="../../ext-all.js"></script>
   
   
      <script type="text/javascript" src="GroupSummary.js"></script>
      <script type="text/javascript" src="totals.js"></script>
   
      <link rel="stylesheet" type="text/css" href="summary.css" />
      <link rel="stylesheet" type="text/css" href="grid-examples.css" />
   
      <!-- Common Styles for the examples -->
      <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
   
      <style type="text/css">
          .negative {
              color: #dd0000;
          }
          .positive {
              color: green;
          }
              .x-grid-group-collapsed .x-grid-group-hd .x-grid-group-title {
                  position: absolute; !important
                    float: left; !important
              }
          .x-grid3-cell-inner {
              font-family:"segoe ui",tahoma, arial, sans-serif;
          }
              
          .x-grid-group-hd div {
              font-family:"segoe ui",tahoma, arial, sans-serif;
          }
              
          .x-grid3-hd-inner {
              font-family:"segoe ui",tahoma, arial, sans-serif;
              font-size:12px;
          }
          .x-grid3-body .x-grid3-td-cost {
              background-color:#f1f2f4;
          }
          .x-grid3-summary-row .x-grid3-td-cost {
              background-color:#e1e2e4;
          }
          .icon-grid {
              background-image:url(../shared/icons/fam/grid.png) !important;
          }
          .x-grid3-dirty-cell {
              background-image:none;
          }
      </style>
  </head>
  <body>
  <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES --> <h1>Group Summary Plugin</h1> <p>Note that the js is not minified so it is readable. See <a href="totals.js">totals.js</a>.</p>
   
  </body>
  </html>

the js:

Code:

  /*
   * Ext JS Library 2.2.1
   * Copyright(c) 2006-2009, Ext JS, LLC.
   * licensing@extjs.com
   *
   * http://extjs.com/license
   */
   
  Ext.onReady(function(){
   
      Ext.QuickTips.init();
   
      var xg = Ext.grid;
   
      var reader = new Ext.data.JsonReader({
          idProperty:'taskId',
          fields: [
              {name: 'projectId', type: 'int'},
              {name: 'project', type: 'string'},
              {name: 'taskId', type: 'int'},
              {name: 'description', type: 'string'},
              {name: 'estimate', type: 'float'},
              {name: 'rate', type: 'float'},
              {name: 'cost', type: 'float'},
              {name: 'due', type: 'date', dateFormat:'m/d/Y'}
          ]
   
      });
   
      // define a custom summary function
      Ext.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
          return v + (record.data.estimate * record.data.rate);
      }
   
      var summary = new Ext.grid.GroupSummary(); 
   
      var grid = new xg.EditorGridPanel({
          ds: new Ext.data.GroupingStore({
              reader: reader,
              data: xg.dummyData,
              sortInfo:{field: 'due', direction: "ASC"},
              groupField:'project'
          }),
   
          columns: [
              {
                  id: 'description',
                  header: "Task",
                  width: 80,
                  sortable: true,
                  dataIndex: 'description',
                  summaryType: 'count',
                  hideable: false,
                  summaryRenderer: function(v, params, data){
                      return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
                  },
                  editor: new Ext.form.TextField({
                     allowBlank: false
                  })
              },{
                  header: "Project",
                  width: 20,
                  sortable: true,
                  dataIndex: 'project'
              },{
                  header: "Due Date",
                  width: 25,
                  sortable: true,
                  dataIndex: 'due',
                  summaryType:'max',
                  renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                  editor: new Ext.form.DateField({
                      format: 'm/d/Y'
                  })
              },{
                  header: "Estimate",
                  width: 20,
                  sortable: true,
                  dataIndex: 'estimate',
                  summaryType:'sum',
                  renderer : function(v){
                      return v +' hours';
                  },
                  editor: new Ext.form.NumberField({
                     allowBlank: false,
                     allowNegative: false,
                     style: 'text-align:left'
                  })
              },{
                  header: "Rate",
                  width: 20,
                  sortable: true,
                  renderer: Ext.util.Format.usMoney,
                  dataIndex: 'rate',
                  summaryType:'average',
                  editor: new Ext.form.NumberField({
                      allowBlank: false,
                      allowNegative: false,
                      style: 'text-align:left'
                  })
              },{
                  id: 'cost',
                  header: "Cost",
                  width: 20,
                  sortable: false,
                  groupable: false,
                  renderer: function(v, params, record){
                      return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
                  },
                  dataIndex: 'cost',
                  summaryType:'totalCost',
                  summaryRenderer: Ext.util.Format.usMoney
              }
          ],
   
          view: new Ext.grid.GroupingView({
              forceFit:true,
              showGroupName: false,
              enableNoGroups:false, // REQUIRED!
              hideGroupedColumn: true
          }),
   
          plugins: summary,
   
          frame:true,
          width: 800,
          height: 450,
          clicksToEdit: 1,
          collapsible: true,
          animCollapse: false,
          trackMouseOver: false,
          //enableColumnMove: false,
          title: 'Sponsored Projects',
          iconCls: 'icon-grid',
          renderTo: document.body
      });
  });
   
  Ext.grid.dummyProjects = [
      {projectId: 100, project: 'Ext Forms: Field Anchoring'},
      {projectId: 101, project: 'Ext Grid: Single-level Grouping'},
      {projectId: 102, project: 'Ext Grid: Summary Rows'} ];
   
  Ext.grid.dummyData = [
      {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
      {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
      {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
      {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
      {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
      {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
      {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
      {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
      {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
      {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'} ];

any help on how to make this hack work with this example?

**joseaio** · 14 Sep 2010 9:36 AM

Only for 3.2 version... (I don't work with 2.X version)

Try with:

Code:

   .x-grid-group-collapsed .x-grid-group-hd div{
      position: absolute; !important
      float: left; !important
   }

**divyendu** · 14 Sep 2010 11:27 AM

worked perfectly joseaio! thanks so much :-)

just for my understanding, could you pls tell me what makes it work when we add the 'div' in the code?

**joseaio** · 15 Sep 2010 1:57 AM

You can install Firebug (on your Firefox browser) and see de HTML/CSS Styles of ExtJS components (to understand CSS selectors you can see W3Schools)

**ExTriqui** · 24 Sep 2010 3:52 AM

I think I have improved it a little bit. Just in case your group header and summary overlap.

When collapsed you hide the header.

Code:

.x-grid-group-collapsed .x-grid-group-hd .x-grid-group-title {
	position: absolute;
	float: left;
	width: 0px;
	padding-right: 0px;
	overflow: hidden;
	white-space: nowrap;
}

Then use a group summary calculation to display the text for that column in the summary.
* If the column is grouped it will always display the group value.
* If the column is not grouped it won't display anything unless all the rows have the same value in that field.

Code:

Ext.ux.grid.GroupSummary.Calculations["text"] = function(value, record, field, data) {
	if (value == 0) {
		value = record.data[field];
	}
	// Only displayed when all rows have the same value. Otherwise return &#38;#160; or &#38;nbsp;.
	// if you return " ", null or undefined, it will display the value for the last row.
	return value == record.data[field]? value: "&#38;#160;";
};

Make sure you don't hide the grouped column (it's shown by default).
When collapsed you will see one row with all the values (including the grouped text) aligned under their columns and they won't overlap.
When expanded you will see the group header displayed according to the template you defined.

**joseaio** · 24 Sep 2010 5:24 AM

Can you add some images to show your improvement?

**ExTriqui** · 28 Sep 2010 12:46 AM

As you can see collapsed groups don't display the group header but the column summary (which is a "text" summary type) which is properly aligned and thus avoid overlapping.

summary.png

**joseaio** · 28 Sep 2010 1:03 AM

Yes, this way allows large summary (without overlaps header & summary) or summary on first columns.

I like that summary/totals go to end columns: You can avoid overlap if shows empty "Client Traffic" column on summary and overwrite header to remove the preffix "Client Traffic:"

Of course this is a valid alternative.

**ExTriqui** · 28 Sep 2010 5:39 AM

Well, your idea was great, simple and clean. I just needed collapsed groups to look exactly like normal rows, so when I saw your hack I thought it was a good idea to completely replace the group header with the group summary row, since you can add anything you need to it.

Collapse "Group Header" and "Summary" in single row

Thread Tools

Search Thread

Display

Collapse "Group Header" and "Summary" in single row

Collapse "Group Header" and "Summary" in single row

not working for ext 2.x

not working for ext 2.x

Fixed columns overlapping.

Fixed columns overlapping.

Similar Threads

[CLOSED][3.0] SetValue shows "valueField" instead of "displayField". mode "local".

[UNKNOWN][3.0.2] collapseMode "mini" and split "true" still render header bar

[Help]How can I put the "Group by" and the "paging" function together into a grid?

replace the "south" with the "new Ext.StatusBar" in "layout:'border'"