Has anyone combined RowExpander/Grouping/GroupingSummary?

[bodyboarder20]

Hey guys ---

What I'm looking for is the GroupingSummary grid feature, but I want the summary row to proceed the group - and act as the focus of expanding/collapsing....

Since the field that is grouped on can vary and this would cause an issue, the combination of these would have to forgo the ability to select from the grid header which field it should be grouped on - and the grouping would have to be static.... Also - since the columns can be re-ordered, the expand/collapse cant be done on a particular field column, and would therefore have to be done using something like the RowExpander....

Has anyone tried to do this??

If you're having trouble visualizing this - let me know and I can mock up an example....

Does anyone have any interest in this sort of thing?

-Jared

[qooleot]

I think adding multiple features to a gridpanel that all alter the UI in terms of layout is pretty difficult. From what I understand extjs 4 is supposed to be "better" at this but its still a difficult task - this is a thread I started ~ a year ago with a similar type of request:

http://www.sencha.com/forum/showthre...ummaryGridView

As for your grouping grid + rowexpander, I think there is at least the workaround of having a grouping grid and a row click handler with a panel above/below/on side of the grid that shows the details of what would show up under the expander like this:

http://docs.sencha.com/ext-js/4-0/#!...h-classes.html

so you could potentially sidestep the problem for now.

[matthewh]

It is possible to use both the RowExpander and grouping feature in the same grid. Get 4.0.6. The RowExpander shipped with 4.0.2a does not work.

[maneljn]

rowexpander and grouping

//@charset UTF-8

Ext.define('esitareas.view.tareas.mantGrid', {
    extend: 'esitareas.view.gridBase',
    alias : 'widget.esitareas_view_tareas_mantGrid',
    
    requires: [
        'Ext.Action',
        'Ext.toolbar.Paging',
        'Cesi.ux.PagingToolbarResizer',
        'Ext.menu.Menu',
        'Ext.grid.Panel',
        'Ext.grid.plugin.DragDrop',
        'Ext.grid.feature.GroupingSummary',
        'Ext.grid.column.Date',
        'Ext.toolbar.Toolbar',
        'Ext.ux.CheckColumn',
        'Ext.selection.CheckboxModel',
        'Ext.data.Store',
        'Cesi.ux.form.field.TriggerNuevoRapido',
        'Cesi.ux.form.field.TriggerBuscar',
        'Ext.toolbar.Separator',
        'Ext.toolbar.Fill',
        'Ext.ux.RowExpander'
    ],

    name: 'gridTareas',
    title: gt.dgettext('esitareas','Tareas'),
    closable: false,
    border: true,
    viewConfig: {
        stripeRows: false,
        plugins: {
            ptype: 'gridviewdragdrop',
            ddGroup: 'grid2tree',
            enableDrag: true,
            enableDrop: false,
            dragText: gt.dgettext('esitareas','{0} tarea(s) seleccionada(s).')
        }
    },
    // Plugins
    plugins: [{
        ptype: 'rowexpander',
        //rowBodyTpl: ['<p><b>'+gt.dgettext('esitareas','Observaciones')+':&nbsp;</b> {tar_observaciones}</p>']
        rowBodyTpl: ['<p class="grid-tareas-observaciones">{tar_observaciones}</p>']
    }],
    
    // Mostrar los cuadrados a la izquierda para seleccionar multiples filas
    //selModel: Ext.create('Ext.selection.CheckboxModel'),
    multiSelect: true,

    // Rama del tree de la lista asignada al mantenimiento
    nodeListaTareasAsociado: null,
    
    //
    // Constructor para gestionar bien todos los plugins simultaneamente
    //
    constructor: function() {
        var me = this;
        var grid;
        var features;

        // ---------------------------------------------------------------
        // Para poder agrupar por campos
        // ---------------------------------------------------------------
        me.groupingGrid = Ext.create('Ext.grid.feature.GroupingSummary',{
            name: 'groupingGrid',                
            //groupHeaderTpl: '<?php echo addslashes(_IDI_DISTRIBUIDORES_SINGULAR); ?>: {name}',
            //groupHeaderTpl: '{name}',
            //hideGroupedHeader: true,
            enableGroupingMenu: true
        });

        me.features = [ me.groupingGrid ];

        me.callParent(arguments);
    },
    
        
    initComponent: function() {
        var me = this;

        // Añadir eventos para hacer un fireEvent desde los botones Action, puesto que los Action no encajan bien en el
        // modelo MVC
        me.addEvents("nuevo","editar","borrar","imprimir");
        
        // ---------------------------------------------------------------
        // Definir boton accion NUEVO
        // ---------------------------------------------------------------
        me.nuevoAction = Ext.create('Ext.Action', {
            name: 'nuevoAction',
            iconCls: 'icono_nuevo',
            text: gt.dgettext('esitareas','Nueva Tarea'),
            disabled: true,
            handler: function(){
                // Lanzar evento 'nuevo' del grid pasando el action y el propio grid
                this.fireEvent("nuevo", this.nuevoAction, this);
            },
            scope: me
        });
        
        // ---------------------------------------------------------------
        // Definir boton accion EDITAR
        // ---------------------------------------------------------------
        me.editarAction = Ext.create('Ext.Action', {
            name: 'editarAction',
            iconCls: 'icono_editar',
            text: gt.dgettext('esitareas','Editar Tarea'),
            disabled: true,
            handler: function(){
                // Lanzar evento editar del grid pasando el action y el propio grid
                this.fireEvent("editar", this.editarAction, this );
            },
            scope: me
        });
        
        // ---------------------------------------------------------------
        // Definir boton accion BORRAR
        // ---------------------------------------------------------------
        me.borrarAction = Ext.create('Ext.Action', {
            name: 'borrarAction',
            iconCls: 'icono_borrar',
            text: gt.dgettext('esitareas','Borrar Tarea'),
            disabled: true,
            handler: function(){
                // Lanzar evento 'borrar' del grid pasando el action y el propio grid
                this.fireEvent("borrar", this.borrarAction, this);
            },
            scope: me
        });
        
        // ---------------------------------------------------------------
        // Definir boton accion IMPRIMIR
        // ---------------------------------------------------------------
        me.imprimirAction = Ext.create('Ext.Action', {
            name: 'imprimirAction',
            iconCls: 'icono_imprimir',
            text: gt.dgettext('esitareas','Imprimir'),
            disabled: true,
            handler: function() {
                // Lanzar evento 'imprimir' del grid pasando el action y el propio grid
                this.fireEvent("imprimir", this.imprimirAction, this);
            },
            scope: me
        });
        
        // ---------------------------------------------------------------
        // Definir texfield NUEVORAPIDO
        // ---------------------------------------------------------------
        me.campoNuevoRapido = Ext.create('Cesi.ux.form.field.TriggerNuevoRapido', {
            name: 'campoNuevoRapido',
            emptyText: gt.dgettext('esitareas','Crear nueva tarea'),
            anchor: '100%',
            disabled: true
        });

        // ---------------------------------------------------------------
        // Definir texfield BUSCAR
        // ---------------------------------------------------------------
        me.campoBuscar = Ext.create('Cesi.ux.form.field.TriggerBuscar', {
            name: 'campoBuscar',
            disabled: true,
            flex: 1,
            width: 200
        });

        // ---------------------------------------------------------------
        // Menu grid boton derecho
        // ---------------------------------------------------------------
        me.menuContextualGrid = Ext.create('Ext.menu.Menu', {
            name: 'menuContextualGrid',
            items: [
                me.nuevoAction,
                '-',
                me.editarAction,
                me.borrarAction,
                '-',
                me.imprimirAction
            ]
        });
    
        // ---------------------------------------------------------------
        // Asignar el store (Forzamos la creación de un objeto nuevo)
        // ---------------------------------------------------------------
        //me.store = esitareasApp.getStore('listas');
        me.store = Ext.create('esitareas.store.tareas', {
            storeId: Ext.id()
        });

        // ---------------------------------------------------------------
        // Barra paginacion de la lista
        // ---------------------------------------------------------------
        me.paginacionGrid = Ext.create('Ext.PagingToolbar', {
            name: 'paginacionGrid',
            store: me.store,
            displayInfo: true,
            pageSize: 50,
            //plugins : [Ext.create('Cesi.ux.PagingToolbarResizer', {options : [ 50, 100, 500 ] })]
            plugins : [Ext.create('Cesi.ux.PagingToolbarResizer')]
        });

        // ---------------------------------------------------------------
        // Definir las columnas
        // ---------------------------------------------------------------
        me.columns = [
            {text: gt.dgettext('esitareas','Id'), width: 50, dataIndex: 'tar_id', hidden: true, sortable: true, groupable: false},
            {text: gt.dgettext('esitareas','Guid'), width: 75, dataIndex: 'tar_guid', hidden: true, sortable: true, groupable: false},
            {name: 'tar_completada', xtype: 'checkcolumn', text: gt.dgettext('esitareas','Completada'), width: 75, dataIndex: 'tar_completada', sortable: true, align:'center', groupable: true },
            {text: gt.dgettext('esitareas','Lista'), width: 150, dataIndex: 'lis_nombre', hidden: true, sortable: true, groupable: true},
            {text: gt.dgettext('esitareas','Nombre'), width: 300, flex: 1, dataIndex: 'tar_nombre', sortable: true, groupable: false,
                renderer: function(val, metaData, record, rowIndex, colIndex, store, view) {
                    // Unir parte fija i contador (colorear si facturado)
                    if (record.data.tar_completada) {
                        metaData.tdCls = 'columna-tarea-completada';
                    } else {
                        metaData.tdCls = '';
                    }
                    return val;
                }
            },
            {text: gt.dgettext('esitareas','Creada por'), width: 120, dataIndex: 'tar_usralta_nombre', hidden: false, sortable: true, groupable: true},
            {text: gt.dgettext('esitareas','Fecha Alta'), width: 100, dataIndex: 'tar_fechaalta', sortable: true, hidden: false, xtype: 'datecolumn', format: 'd-m-Y H:i', groupable: true },
            {text: gt.dgettext('esitareas','Modif. por'), width: 120, dataIndex: 'tar_usrmod_nombre', hidden: true, sortable: true, groupable: true},
            {text: gt.dgettext('esitareas','Fecha Modif.'), width: 100, dataIndex: 'tar_fechamod', sortable: true, hidden: true, xtype: 'datecolumn', format: 'd-m-Y H:i', groupable: true }                    
        ];    
        
        // barra botones superior
        me.dockedItems = [{
            xtype: 'toolbar',
            items: [ 
                me.nuevoAction, 
                me.editarAction, 
                me.borrarAction,
                { xtype:'tbseparator' }, 
                me.imprimirAction,
                { xtype:'tbfill' }, 
                me.campoBuscar
            ]
        },{
            xtype: 'toolbar',
            layout: 'anchor',
            items: [ 
                me.campoNuevoRapido
            ]
        }];    

        // barra paginacion inferior
        me.bbar = me.paginacionGrid;

        // Ejecutar metodo de su parent
        me.callParent(arguments);        

    }
    
});