MultiGroupingPanel on Ext 3.3 beta

**Ronhead** · 28 Feb 2012 6:42 AM

hi everyone!
i ve a problem with this plugin in 3.x version

firebug showme this error

Code:

[IMG]chrome://firebug/content/blank.gif[/IMG]
Ext.fly(rows[0]).addClass(this.firstRowCls);

Html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all-debug-w-comments.js"></script>

<title>test</title>


    <script type="text/javascript" src="../js/ux/grid/MultiGroupingStore.js"></script>
    <script type="text/javascript" src="../js/ux/grid/MultiGroupingView.js"></script>
    <script type="text/javascript" src="../js/ux/grid/MultiGroupingPanel.js"></script>

<script>
 
Ext.onReady(function(){
    Ext.QuickTips.init();  
    Ext.BLANK_IMAGE_URL="../js/ext/resources/images/default/s.gif";
    Ext.form.Field.prototype.msgTarget = 'side';
    
  
  var WorkOrderRecord = Ext.data.Record.create([
      {name: 'local'},
       {name: 'fecha'},
       {name: 'vendedor'},
       {name: 'trx'},
       {name: 'boleta'},
       {name: 'tipo_doc'},
       {name: 'productos'},
       {name: 'descripcion'},
       {name: 'cantidad'},
       {name: 'venta'}
    ]);
  
   
     var columnModel = new Ext.grid.ColumnModel([
      {header: "Local",           dataIndex: 'local',       sortable: true, width: 150, align:'center' },
      {header: "Fecha Contable",  dataIndex: 'fecha',       sortable: true, width: 90,  align:'center'},
      {header: "Vendedor",       dataIndex: 'vendedor',       sortable: true, width: 200, align:'center'},
      {header: "Nº TRX" ,        dataIndex: 'trx',          sortable: true, width: 90,    align:'center'},
      {header: "Nº Boleta" ,       dataIndex: 'boleta',       sortable: true, width: 90,    align:'center'},
      {header: "Tipo de Doc.",    dataIndex: 'tipo_doc',       sortable: true, width: 90,    align:'center'},
      {header: "Productos",       dataIndex: 'productos',    sortable: true, width: 90,    align:'center'},
      {header: "Descripción",       dataIndex: 'descripcion',    sortable: true, width: 200, align:'center'},
      {header: "Cantidad",       dataIndex: 'cantidad',       sortable: true, width: 90,    align:'center'},
      {header: "Venta",          dataIndex: 'venta',       sortable: true, width: 90,    align:'center'}
     ]);


  // create reader that reads into Topic records
     var reader = new Ext.data.JsonReader({
        root: 'list_inf'
       ,id: 'local'
     }, WorkOrderRecord); 

 
   
    
     var groupStore = new Ext.ux.grid.MultiGroupingStore({
        proxy: new Ext.data.HttpProxy({
          url: 'SelectInformeTraeLlevaJson',
          method: 'POST'
        })                     
       ,reader: reader
       ,sortInfo: {field: 'local', direction: 'ASC'}
       ,groupField: ['local']
     });

     var groupView = new Ext.ux.grid.MultiGroupingView({
        hideGroupedColumn :true
       ,emptyGroupText: 'All Group Fields Empty'
       ,displayEmptyFields: true //you can choose to show the group fields, even when they have no values
       ,groupTextTpl: '{text} : {group}'
       ,displayFieldSeperator: ', ' //you can control how the display fields are seperated
       ,stripeRows:false
     });

     var grid = new Ext.ux.grid.MultiGroupingPanel({
        store: groupStore
        ,layout: 'fit'
        ,region : 'center'
       ,cm:columnModel
       ,view: groupView
       ,bbar: new Ext.Toolbar({  
          items:[{
                text:"Clear All"
               ,scope:groupStore 
               ,handler: function() {
                  console.debug("This=",this);
                  this.groupBy([]);
                }
             }]  
       })
     }); 
  

   groupStore.baseParams = {
         fecha_inicio   : "01/01/2011",
         fecha_fin   : "24/02/2012",
         id_local_id   : 1,
         id_vendedor_id   : ""
      };
   groupStore.load();   

   var viewport = new Ext.Viewport({
       layout: 'border',
       items: [grid]           
   });

     
});


</script>
</head>
<body>
</body>
</html>

json

Code:

{"list_inf":[{"boleta":41,"cantidad":1,"descripcion":"TRIPLE  II CALZADO  MUJER","fecha":{"date":26,"day":2,"hours":0,"minutes":0,"month":3,"seconds":0,"time":1303790400000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA  1","productos":"142383","tipo_doc":"Boleta","trx":211,"vendedor":"Vendedor  No Identificado - 0103503493","venta":-14999},
          {"boleta":111,"cantidad":1,"descripcion":"TRIPLE II CALZADO  MUJER","fecha":{"date":28,"day":4,"hours":0,"minutes":0,"month":3,"seconds":0,"time":1303963200000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA  1","productos":"142389","tipo_doc":"Boleta","trx":519,"vendedor":"Vendedor  No Identificado - 0103503493","venta":-19999},
          {"boleta":158,"cantidad":1,"descripcion":"TRIPLE II CALZADO  MUJER","fecha":{"date":3,"day":2,"hours":0,"minutes":0,"month":4,"seconds":0,"time":1304395200000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA  1","productos":"142389","tipo_doc":"Boleta","trx":653,"vendedor":"Vendedor  No Identificado - 0103503493","venta":-19999},
          {"boleta":159,"cantidad":1,"descripcion":"TRIPLE II CALZADO  MUJER","fecha":{"date":3,"day":2,"hours":0,"minutes":0,"month":4,"seconds":0,"time":1304395200000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA  1","productos":"142383","tipo_doc":"Boleta","trx":654,"vendedor":"Vendedor  No Identificado - 0103503493","venta":-15000},
          {"boleta":404,"cantidad":1,"descripcion":"TRIPLE II CALZADO  MUJER","fecha":{"date":14,"day":2,"hours":0,"minutes":0,"month":5,"seconds":0,"time":1308024000000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA  1","productos":"3200136","tipo_doc":"Boleta","trx":321,"vendedor":"Vendedor  No Identificado - 0103503493","venta":-7449},
          {"boleta":88,"cantidad":1,"descripcion":"CENTRACIZE CALZADO  MUJER","fecha":{"date":2,"day":5,"hours":0,"minutes":0,"month":8,"seconds":0,"time":1314936000000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA 1","productos":"2106220203981","tipo_doc":"Nota de  Cr?dito","trx":163834193,"vendedor":"SUPERVISOR ","venta":399},
          {"boleta":89,"cantidad":1,"descripcion":"CENTRACIZE CALZADO  MUJER","fecha":{"date":2,"day":5,"hours":0,"minutes":0,"month":8,"seconds":0,"time":1314936000000,"timezoneOffset":240,"year":111},"local":"1  - HP AHUMADA 1","productos":"2106220203981","tipo_doc":"Nota de  Cr?dito","trx":164525639,"vendedor":"SUPERVISOR ","venta":399}]}

**TonyBones** · 14 Jun 2012 11:04 AM

So I recently came across this plugin for 2.x but needed this working in 3.4. So I've spent the last few days getting the JAFFA sources converted to 3.4.

So far so good. I have a number of changes. I fixed the Ext.fly(rows[0]) is null issue you are referring too. Just trying to get sorting to work again then I'll see about posting my source if anyone is interested.

**youwant** · 16 Jun 2012 1:53 AM

i am very interested。

waiting for your post

**TonyBones** · 18 Jun 2012 1:58 PM

Here is the first release of the Multi Grouping Grid / View / Store objects for ExtJS 3.4.

I pulled the original source from:
http://jaffa.sourceforge.net/JaffaRI...ultiGroup.html
Which is for ExtJS 2.x.

And big thanks to venky0589, yyogev and all the help from everyone in the 2.x forum for taking the first crack at this for both 2.x and 3.x.

If I find time I might start a GitHub of my branch. I don't mind maintaining it if people find bugs. Just post here and hopefully I can help. Please note this is a work in progress as of right now, I'm sure its not perfect, but it has satisfied my needs so far.

Release Notes:
- upgraded source to support ExtJS 3.4
- multi grouping grid
- support for group renderers
- support for remote sorting and grouping
- ExtJS 3.4 CSS applied
- Indention of sub-groups (View config indentGroups: bool)
- fixed overflow of group header border
- fixed processEvent overload
- disabled support for toolbar grouping display and Drag N Drop support. (hopefully I will find a way to re-integrate these features again)
- tested in Firefox and IE8

View Configs:
- indentGroups : bool true to indent groups

Store Configs:
- enableMultiGrouping: bool true to enable multi-grouping (Default: false; restrict to only 1 grouping field)

I haven't used or tested any of the *Paging* classes.

-Tony
MultiGroupingGrid.ExtJS3.4-1.0.zip

**TonyBones** · 20 Jun 2012 4:59 PM

a diff to fix a bug with group rows being processed twice.

Code:

Index: ext/ux/grid/MultiGroupingView.js
===================================================================
--- ext/ux/grid/MultiGroupingView.js    (revision 23396)
+++ ext/ux/grid/MultiGroupingView.js    (working copy)
@@ -416,9 +416,11 @@
               } else {
                   if (!gs[i].childNodes[1]) {
                       if (window.console) console.error("Can't get rowcount for field ", lsField, " from ", gs, i);
-                  } else
-                  // if its an interim level, each group needs to be traversed as well
-                      r = this.getRowsFromGroup(r, gs[i].childNodes[1].childNodes, lsField);
+                  }
+                // AMA No need for recursive call anymore because the gs array is selected via DOM query, getting all grid groups
+                // else
+                      // if its an interim level, each group needs to be traversed as well
+                      //r = this.getRowsFromGroup(r, gs[i].childNodes[1].childNodes, lsField);
               }
         }
         return r;

**britoyen** · 21 Jun 2012 1:46 PM

when testing I get the following error:

Ext.ux.clone is not a function
this.origColModel = Ext.ux.clone(config.cm.config);

**TonyBones** · 21 Jun 2012 2:05 PM

Ha, thats funny. So of course I haven't used config.cm or config.colModel yet. I am using config.columns which skips this test.

You can just comment those lines out for now. The values aren't used anywhere since I commented out the toolbar stuff. It's just trying to make a clone of the Column model.

I'm not really sure where Ext.ux.clone would be defined (which add-on). This must be something that the JAFFA code is importing from elsewhere, as I don't have w/e is defining that function either. I'm going to just remove it for now since its not doing anything, you can do the same.

-Tony

This seems to be it (for 2.x)
http://www.sencha.com/forum/showthre...oning-function

**raffyaslanbeily** · 25 Nov 2012 6:19 AM

Hi everyone,
Is there any chance to add a summaries plugin to this grouping stuff? the regular one doesn't work (at least, on 3.4). I am going to dig into this, but just in case - maybe the problem has already been solved by anyone?
Kindest regards,
Raffy

**TonyBones** · 26 Nov 2012 11:18 AM

This is actually what I've been working on

I have it all working pretty solid right now, but it's not ready for release yet. I still have some things I need to clean up, like my I18N label references. And I've integrated some custom mutli-grouping buttons/settings into the bottom paging bar of the grid to manage/clear/reset mutli-groupings, this UI code is all hardcoded right now as well. I'm using the silk image library for button icons. So I'd also have to externalize those configs. All this stuff is simple to modify yourself though, it's just not ready to use "out of the box".

There are updates to all 3 MutliGrouping*.js files. Also the converted GroupSummary.js and GroupSummary.css. I'll try to clean these up a bit this week, see about getting them released.

Added support for:
- header and footer div above and below the aggregation table in the summary section that matches the column widths.
- toggling individual summary sections or all sections at once
- color coding N number of summary depths with their matching grouping header (css)
- toggle color support
- configurable indention spacing of group body sections
- restrict max number of multi-groupings via the MutliGroupingStore config

**raffyaslanbeily** · 26 Nov 2012 11:28 PM

Oh, wow, great news, Tony

I have already done something for my own needs and certainly I cannot publish it because it's not generalized at all, but I am still suffering from some issues

MultiGroupingPanel on Ext 3.3 beta

Thread Tools

Search Thread

Display

Ext.fly(rows[0]) is null

Ext.fly(rows[0]) is null

Working in 3.4

Working in 3.4

ExtJS 3.4 Support

ExtJS 3.4 Support

error: Ext.ux.clone...

error: Ext.ux.clone...

Similar Threads

How to set start/end TIME for Ext.calendar.CalendarPanel (Ext 3.3. beta)

How can we make groupField to be Selectable in Ext.ux.MultiGroupingPanel

Ext.nd Beta 1

Ext 2.0 Beta 1 Now Available

[beta] Ext.ux.ItemSelector (part of Ext.ux.Multiselect v1.2)