1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    18
    Vote Rating
    0
    joseaio is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha User
    Join Date
    Jan 2010
    Posts
    17
    Vote Rating
    0
    divyendu is on a distinguished road

      0  

    Question not working for ext 2.x

    not working for ext 2.x


    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?

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    18
    Vote Rating
    0
    joseaio is on a distinguished road

      0  

    Default


    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
       }

  4. #4
    Sencha User
    Join Date
    Jan 2010
    Posts
    17
    Vote Rating
    0
    divyendu is on a distinguished road

      0  

    Default


    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?

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    18
    Vote Rating
    0
    joseaio is on a distinguished road

      0  

    Default


    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)

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Thumbs up Fixed columns overlapping.

    Fixed columns overlapping.


    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.
    Last edited by ExTriqui; 24 Sep 2010 at 4:01 AM. Reason: html character not displayed properly.

  7. #7
    Ext User
    Join Date
    Aug 2010
    Posts
    18
    Vote Rating
    0
    joseaio is on a distinguished road

      0  

    Default


    Can you add some images to show your improvement?

  8. #8
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    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
    Last edited by ExTriqui; 28 Sep 2010 at 5:42 AM. Reason: Inline attached image.

  9. #9
    Ext User
    Join Date
    Aug 2010
    Posts
    18
    Vote Rating
    0
    joseaio is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  2. Replies: 4
    Last Post: 30 Sep 2009, 11:07 PM
  3. Replies: 8
    Last Post: 25 Sep 2008, 3:40 AM
  4. replace the "south" with the "new Ext.StatusBar" in "layout:'border'"
    By ealpha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 May 2008, 8:28 PM

Thread Participants: 5