PDA

View Full Version : Has anyone combined RowExpander/Grouping/GroupingSummary?



bodyboarder20
23 Aug 2011, 5:16 AM
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
1 Sep 2011, 5:17 PM
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/showthread.php?100039-GroupedHeaderLockingGroupingGroupSummaryGridView

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/#!/example/grid/binding-with-classes.html

so you could potentially sidestep the problem for now.

matthewh
18 Oct 2011, 9:51 AM
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
3 Jan 2013, 3:36 AM
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);

}

});