Code:
//@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')+': </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);
}
});