mirror of https://github.com/Kodomo/Dazzler
874 lines
24 KiB
JavaScript
874 lines
24 KiB
JavaScript
/* !
|
|
* This file is part of Dazzler
|
|
* Copyright(c) 2011 USI - Universidad de Concepcion
|
|
*
|
|
* Dazzler is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Dazzler is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Dazzler. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
|
|
|
|
Ext.ns('Ext.ux', 'Ext.ux.crudGridPanel');
|
|
|
|
/* Basic Read Store - no write capabilities */
|
|
Ext.ux.crudGridPanel.rStore = Ext.extend(Ext.data.Store, {
|
|
|
|
constructor: function(config){
|
|
if(config.defaultLimit)
|
|
this.defaultLimit = config.defaultLimit;
|
|
|
|
if(config.buildFields)
|
|
this.buildFields = config.buildFields;
|
|
|
|
config = Ext.apply({
|
|
proxy : this.buildProxy(),
|
|
reader : this.buildReader(),
|
|
remoteSort : true,
|
|
sortInfo : {field: 'id', direction: 'DESC'},
|
|
autoLoad : {params:{start: 0, limit: this.defaultLimit}}
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.rStore.superclass.constructor.call(this,config);
|
|
},
|
|
|
|
defaultLimit: 25,
|
|
|
|
buildFields: function(){
|
|
return ['id','name'];
|
|
},
|
|
|
|
buildReader: function(){
|
|
return new Ext.data.JsonReader({
|
|
root : 'root',
|
|
totalProperty : 'totalCount',
|
|
idProperty : 'id',
|
|
messageProperty : 'msg',
|
|
fields : this.buildFields()
|
|
});
|
|
|
|
},
|
|
|
|
buildProxy: function(){
|
|
return new Ext.data.DirectProxy({
|
|
api: {
|
|
read: Dazzler.api.DirectRead
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
/* Read/Create/Update Store - no delete capabilities */
|
|
Ext.ux.crudGridPanel.cruStore = Ext.extend(Ext.ux.crudGridPanel.rStore, {
|
|
constructor: function(config){
|
|
config = Ext.apply({
|
|
proxy : this.buildProxy(),
|
|
writer : this.buildWriter()
|
|
}, config);
|
|
Ext.ux.crudGridPanel.cruStore.superclass.constructor.call(this,config);
|
|
},
|
|
|
|
buildProxy: function(){
|
|
return new Ext.data.DirectProxy({
|
|
api: {
|
|
read : Dazzler.api.DirectRead,
|
|
update : Dazzler.api.DirectUpdate,
|
|
create : Dazzler.api.DirectCreate
|
|
}
|
|
});
|
|
},
|
|
|
|
buildWriter: function(){
|
|
return new Ext.data.JsonWriter({encode: false, writeAllFields: true });
|
|
}
|
|
|
|
});
|
|
|
|
/* Full Store */
|
|
Ext.ux.crudGridPanel.crudStore = Ext.extend(Ext.ux.crudGridPanel.cruStore, {
|
|
constructor: function(config){
|
|
|
|
config = Ext.apply({
|
|
proxy: this.buildProxy()
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.crudStore.superclass.constructor.call(this,config);
|
|
},
|
|
|
|
buildProxy: function(){
|
|
return new Ext.data.DirectProxy({
|
|
api: {
|
|
read : Dazzler.api.DirectRead,
|
|
update : Dazzler.api.DirectUpdate,
|
|
destroy : Dazzler.api.DirectDestroy,
|
|
create : Dazzler.api.DirectCreate
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
/* Basic Add/Edit Form */
|
|
/* A simple form for creation and edit of the records */
|
|
Ext.ux.crudGridPanel.baseForm = Ext.extend(Ext.FormPanel, {
|
|
constructor: function(config){
|
|
this.backIconCls = config.backIconCls ? config.backIconCls : Ext.ux.TDGi.iconMgr.getIcon('bullet_left');
|
|
this.saveIconCls = config.saveIconCls ? config.saveIconCls : Ext.ux.TDGi.iconMgr.getIcon('disk');
|
|
this.previewIconCls = config.previewIconCls ? config.previewIconCls : Ext.ux.TDGi.iconMgr.getIcon('page_white_magnify');
|
|
|
|
if(config.buildFields)
|
|
this.buildFields = config.buildFields;
|
|
|
|
if(config.buildButtons)
|
|
this.buildButtons = config.buildButtons;
|
|
|
|
if(config.buildPreview)
|
|
this.buildPreview = config.buildPreview;
|
|
|
|
if(config.backButtonText)
|
|
this.backButtonText = config.backButtonText;
|
|
if(config.saveButtonText)
|
|
this.saveButtonText = config.saveButtonText;
|
|
if(config.previewButtonText)
|
|
this.previewButtonText = config.previewButtonText;
|
|
|
|
configForm = Ext.apply({
|
|
}, config.configForm);
|
|
|
|
/* Form setup */
|
|
config = Ext.apply({
|
|
// frame : true,
|
|
border : false,
|
|
width : 400,
|
|
height : 90,
|
|
defaultType : 'textfield',
|
|
defaults : {anchor: '100%'},
|
|
buttonAlign : 'left',
|
|
bodyStyle : "background-color: transparent",
|
|
padding : 10,
|
|
// trackResetOnLoad: false,
|
|
items : this.buildFields(),
|
|
buttons : this.buildButtons()
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.baseForm.superclass.constructor.call(this,config);
|
|
|
|
this.addEvents('savebtn');
|
|
this.addEvents('closebtn');
|
|
this.addEvents('previewbtn');
|
|
},
|
|
|
|
/* default form definition */
|
|
buildFields: function() {
|
|
return [{
|
|
name : 'name',
|
|
fieldLabel : 'Nombre'
|
|
}];
|
|
},
|
|
|
|
buildButtons: function() {
|
|
if(this.buildPreview)
|
|
return [{
|
|
text : this.backButtonText,
|
|
scope : this,
|
|
handler : this.onBack,
|
|
iconCls : this.backIconCls
|
|
},'->',{
|
|
text : this.previewButtonText,
|
|
scope : this,
|
|
handler : this.onPreview,
|
|
iconCls : this.previewIconCls
|
|
},{
|
|
text : this.saveButtonText,
|
|
scope : this,
|
|
handler : this.onSave,
|
|
iconCls : this.saveIconCls
|
|
|
|
}];
|
|
else
|
|
return [{
|
|
text : this.backButtonText,
|
|
scope : this,
|
|
handler : this.onBack,
|
|
iconCls : this.backIconCls
|
|
},'->',{
|
|
text : this.saveButtonText,
|
|
scope : this,
|
|
handler : this.onSave,
|
|
iconCls : this.saveIconCls
|
|
|
|
}];
|
|
},
|
|
|
|
/* Form Actions*/
|
|
onSave: function() {
|
|
this.fireEvent('savebtn', this);
|
|
},
|
|
onPreview: function() {
|
|
this.fireEvent('previewbtn', this);
|
|
},
|
|
onBack: function() {
|
|
this.fireEvent('closebtn', this);
|
|
},
|
|
buildPreview : false,
|
|
|
|
backButtonText : 'Volver',
|
|
saveButtonText : 'Guardar',
|
|
previewButtonText : 'Vista previa',
|
|
previewIconCls : '',
|
|
backIconCls : '',
|
|
saveIconCls : ''
|
|
|
|
});
|
|
|
|
/* Window container of the form for modal presentation */
|
|
Ext.ux.crudGridPanel.baseWindowForm = Ext.extend(Ext.Window, {
|
|
constructor: function(config){
|
|
|
|
configForm = Ext.apply({
|
|
}, config.configForm);
|
|
|
|
this.form = new Ext.ux.crudGridPanel.baseForm(configForm);
|
|
|
|
delete config.configForm;
|
|
|
|
/* setup default listeners */
|
|
listeners = Ext.apply({
|
|
scope : this,
|
|
closebtn: this.onClose
|
|
}, config.listeners);
|
|
|
|
delete config.listeners;
|
|
|
|
config = Ext.apply({
|
|
autoDestroy : false,
|
|
closable : false,
|
|
resizable : false,
|
|
modal : true,
|
|
layout : 'fit',
|
|
listeners : listeners,
|
|
items : [ this.form ]
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.baseWindowForm.superclass.constructor.call(this,config);
|
|
|
|
this.relayEvents(this.form, ['savebtn','closebtn','previewbtn']);
|
|
},
|
|
/* behave like the formPanel, returning the basicForm directly */
|
|
getForm: function (){
|
|
return this.form.getForm();
|
|
},
|
|
currentRecord: null
|
|
});
|
|
|
|
|
|
/* Basic Customizable Grid */
|
|
/* it creates a series of funcion for building for future overloading */
|
|
|
|
Ext.ux.crudGridPanel.baseGrid = Ext.extend(Ext.grid.GridPanel, {
|
|
constructor: function(config) {
|
|
this.selModel = config.selModel ? config.selModel : this.buildSelModel();
|
|
this.buildColumns = config.buildColumns ? config.buildColumns : this.defaultColumns();
|
|
|
|
if(config.buildTbar)
|
|
this.buildTbar = config.buildTbar;
|
|
|
|
if(config.buildBbar)
|
|
this.buildBbar = config.buildBbar;
|
|
|
|
if(config.buildColModel)
|
|
this.buildColModel = config.buildColModel;
|
|
|
|
if(config.buildViewConf)
|
|
this.buildViewConf = config.buildViewConf;
|
|
|
|
config = Ext.apply({
|
|
colModel : this.buildColModel(),
|
|
viewConfig : this.buildViewConf(),
|
|
selModel : this.selModel,
|
|
tbar : this.buildTbar(),
|
|
bbar : this.buildBbar(),
|
|
loadMask : {msg:'Cargando datos...'}
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.baseGrid.superclass.constructor.call(this,config);
|
|
|
|
this.relayEvents(this.selModel, ['selectionchange','rowdeselect','rowselect']);
|
|
},
|
|
/* simple default methods for future overloading */
|
|
buildSelModel: function() {
|
|
return new Ext.grid.RowSelectionModel( {singleSelect:true } );
|
|
},
|
|
|
|
buildColumns: function() {
|
|
return [{ dataIndex: 'id',header: 'Id'},{ dataIndex: 'name', header: 'Name'}];
|
|
},
|
|
|
|
buildColModel: function() {
|
|
return new Ext.grid.ColumnModel({defaults: { sortable: true }, columns: this.buildColumns() });
|
|
},
|
|
|
|
buildViewConf: function() {
|
|
return new Ext.grid.GridView( {forceFit: true});
|
|
},
|
|
|
|
buildTbar: function() {
|
|
return null;
|
|
},
|
|
|
|
buildBbar: function() {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
/* GridPanel read only */
|
|
/* It creates the base GridPanel w Paging toolbar attached */
|
|
|
|
/*
|
|
These are the new parameters add by the class:
|
|
|
|
defaulPageSize : Number of records/page (default: 25)
|
|
defaultDesc : Default description of the records (default: 'Records')
|
|
configStore : Configuration object for the store creation
|
|
(Store can be provided directly by 'store' parameter as usual)
|
|
configPagingToolbar : Configuration object for the Paging Toolbar
|
|
|
|
overload functions:
|
|
|
|
buildStoreFields : function that returns the field parameter for the store Reader object (default: ['id','name'])
|
|
buildColumns : function thar returns the columns parameter for the ColumnModel object
|
|
*/
|
|
|
|
|
|
Ext.ux.crudGridPanel.rPagingGrid = Ext.extend(Ext.ux.crudGridPanel.baseGrid, {
|
|
constructor: function(config){
|
|
|
|
this.baseParams = config.baseParams;
|
|
|
|
if(config.defaultDesc)
|
|
this.defaultDesc = config.defaultDesc;
|
|
|
|
if(config.defaulPageSize)
|
|
this.defaulPageSize = config.defaulPageSize;
|
|
|
|
/* configuration of the Store */
|
|
configStore = Ext.apply({
|
|
defaultLimit: this.defaulPageSize,
|
|
baseParams : this.baseParams
|
|
}, config.configStore);
|
|
|
|
this.store = config.store ? config.store : this.buildStore ( configStore );
|
|
|
|
/* configuration of the Pagin Toolbar */
|
|
configPagingToolbar = Ext.apply({
|
|
pageSize : this.defaulPageSize,
|
|
store : this.store,
|
|
displayInfo : true,
|
|
displayMsg : 'Mostrando '+this.defaultDesc+' {0} al {1} de {2}',
|
|
emptyMsg : 'No existen '+this.defaultDesc
|
|
}, config.configPagingToolbar);
|
|
|
|
|
|
/* Grid Configuration */
|
|
config = Ext.apply({
|
|
store : this.store,
|
|
bbar : this.buildBbar(configPagingToolbar)
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.rPagingGrid.superclass.constructor.call(this,config);
|
|
|
|
this.relayEvents(this.store, ['datachanged']);
|
|
},
|
|
|
|
buildBbar: function(configPagingToolbar){
|
|
return new Ext.PagingToolbar(configPagingToolbar);
|
|
},
|
|
buildStore: function(configStore){
|
|
return new Ext.ux.crudGridPanel.rStore(configStore);
|
|
},
|
|
|
|
defaultDesc : "Records",
|
|
defaulPageSize : 25,
|
|
baseParams : {}
|
|
|
|
});
|
|
|
|
|
|
/* GridPanel update/create mode enabled */
|
|
|
|
/*
|
|
inherits rPagingGrid configuration parameters. These are added by the class:
|
|
|
|
|
|
configForm : Configuration object for the Form creation
|
|
configEditForm : Custom form, for update values
|
|
|
|
invalidTitle : Title of the Error msgBox form data is invalid (defult: 'Error al inrgesar')
|
|
invalidMsg : Msg of the Error msgBox form data is invalid (defult: 'Los datos ingresados no son validos')
|
|
|
|
addWindowTitle : Title of the Form Window when Adding an item (defult: 'Nuevo elemento')
|
|
addButtonText : Text of the Gridpanel Add button (defult: 'Agregar')
|
|
addIconCls : iconCls of the Add button and Add Form Window (default: TDGi.iconMgr 'add' )
|
|
|
|
editWindowTitle : Title of the Form Window when Adding an item (defult: 'Editar elemento')
|
|
editButtonText : Text of the Gridpanel Add button (defult: 'Editar')
|
|
editIconCls : iconCls of the Add button and Add Form Window (default: TDGi.iconMgr 'bullet_edit' )
|
|
|
|
*/
|
|
Ext.ux.crudGridPanel.cruPagingGrid = Ext.extend(Ext.ux.crudGridPanel.rPagingGrid, {
|
|
constructor: function(config){
|
|
this.addIconCls = config.addIconCls ? config.addIconCls : Ext.ux.TDGi.iconMgr.getIcon('add');
|
|
this.editIconCls = config.editIconCls ? config.editIconCls : Ext.ux.TDGi.iconMgr.getIcon('bullet_edit');
|
|
|
|
if(config.addButtonText)
|
|
this.addButtonText = config.addButtonText;
|
|
if(config.editButtonText)
|
|
this.editButtonText = config.editButtonText;
|
|
|
|
|
|
/* Grid Configuration */
|
|
config = Ext.apply({
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.cruPagingGrid.superclass.constructor.call(this,config);
|
|
|
|
if(!config.listeners){
|
|
this.addListener( this.setListeners() );
|
|
}
|
|
|
|
this.formAdd = this.buildFormAdd(config.configForm);
|
|
if(config.configEditForm)
|
|
this.formEdit = this.buildFormEdit(config.configEditForm);
|
|
else
|
|
this.formEdit = this.buildFormEdit(config.configForm);
|
|
|
|
},
|
|
buildFormAdd: function(config){
|
|
configWindow = {
|
|
title : this.addWindowTitle,
|
|
iconCls : this.addIconCls,
|
|
listeners : {
|
|
scope : this,
|
|
savebtn : this.onCreate,
|
|
closebtn : this.onCloseCreate
|
|
},
|
|
configForm: config
|
|
};
|
|
|
|
return new Ext.ux.crudGridPanel.baseWindowForm(configWindow);
|
|
},
|
|
buildFormEdit: function(config){
|
|
configWindow = {
|
|
title : this.editWindowTitle,
|
|
iconCls : this.editIconCls,
|
|
listeners : {
|
|
scope : this,
|
|
savebtn : this.onUpdate,
|
|
closebtn : this.onCloseEdit
|
|
},
|
|
configForm: config
|
|
};
|
|
|
|
return new Ext.ux.crudGridPanel.baseWindowForm(configWindow);
|
|
},
|
|
onCloseCreate: function(){
|
|
this.formAdd.hide();
|
|
},
|
|
onCloseEdit: function(){
|
|
this.formEdit.hide();
|
|
},
|
|
/* default top bar in the cru mode */
|
|
buildTbar: function(){
|
|
return [ {
|
|
text : this.addButtonText,
|
|
iconCls : this.addIconCls,
|
|
scope : this,
|
|
handler : this.onAdd
|
|
} , '->', {
|
|
text : this.editButtonText,
|
|
ref : '../editBtn',
|
|
iconCls : this.editIconCls,
|
|
disabled: true,
|
|
scope : this,
|
|
handler : this.onEdit
|
|
} ];
|
|
},
|
|
/* manually destroy the form window */
|
|
onDestroy: function(){
|
|
this.formAdd.destroy();
|
|
this.formEdit.destroy();
|
|
},
|
|
cleanSaveListener: function(){
|
|
},
|
|
/* show a clean form to create a new record */
|
|
onAdd: function(){
|
|
/* Cleanup! */
|
|
this.formAdd.getForm().reset();
|
|
this.formAdd.show();
|
|
},
|
|
/* Take te form values and add the record to the storage (if valid)*/
|
|
onCreate: function(){
|
|
if (!this.formAdd.getForm().isValid()){
|
|
Ext.Msg.show({
|
|
title : this.invalidTitle,
|
|
msg : this.invalidMsg,
|
|
icon : Ext.MessageBox.ERROR,
|
|
buttons : Ext.Msg.OK
|
|
});
|
|
return false;
|
|
}
|
|
else{
|
|
var record = new this.store.recordType(this.formAdd.getForm().getValues());
|
|
this.store.add(record);
|
|
this.store.reload();
|
|
this.formAdd.hide();
|
|
}
|
|
},
|
|
/* Show the current record values in the form */
|
|
onEdit: function(){
|
|
/* verify that a valid record is selected */
|
|
var record = this.selModel.getSelected();
|
|
if (!record) {
|
|
return false;
|
|
}
|
|
this.formEdit.currentRecord = record;
|
|
this.formEdit.getForm().loadRecord(record);
|
|
this.formEdit.show();
|
|
},
|
|
/* Modify the record values to the ones in the form (if valid)*/
|
|
onUpdate: function(){
|
|
if (!this.formEdit.getForm().isValid()){
|
|
Ext.Msg.show({
|
|
title : this.invalidTitle,
|
|
msg : this.invalidMsg,
|
|
icon : Ext.MessageBox.ERROR,
|
|
buttons : Ext.Msg.OK
|
|
});
|
|
return false;
|
|
}
|
|
else{
|
|
/* update the record information */
|
|
this.formEdit.getForm().updateRecord(this.formEdit.currentRecord);
|
|
this.formEdit.hide();
|
|
}
|
|
},
|
|
/* enable disable edit button */
|
|
onRowSelect: function(SelectionModel){
|
|
this.editBtn.setDisabled(false);
|
|
},
|
|
onRowDeselect: function(SelectionModel){
|
|
this.editBtn.setDisabled(true);
|
|
},
|
|
/* overload of the storage creation method */
|
|
buildStore: function(configStore){
|
|
return new Ext.ux.crudGridPanel.cruStore(configStore);
|
|
},
|
|
setListeners: function(){
|
|
return {
|
|
scope : this,
|
|
rowselect : this.onRowSelect,
|
|
datachanged : this.onRowDeselect,
|
|
rowdeselect : this.onRowDeselect,
|
|
beforedestroy : this.onDestroy
|
|
};
|
|
},
|
|
/* Basic parameters of the object */
|
|
invalidTitle : 'Error al inrgesar',
|
|
invalidMsg : 'Los datos ingresados no son validos',
|
|
addWindowTitle : 'Nuevo elemento',
|
|
editWindowTitle : 'Editar elemento',
|
|
addButtonText : 'Agregar',
|
|
editButtonText : 'Editar',
|
|
addIconCls : '',
|
|
editIconCls : '',
|
|
|
|
});
|
|
|
|
|
|
/* GridPanel update/create/delete mode enabled */
|
|
/*
|
|
inherits cruPagingGrid configuration parameters. These are added by the class:
|
|
|
|
|
|
deleteTitle : Title of the Delete msgBox confirmation dialog (defult: 'Confirmación')
|
|
deleteMsg : Msg of the Delete msgBox confirmation dialog (defult: '¿Está seguro que desea eliminar el registro seleccionado?')
|
|
|
|
deleteButtonText : Text of the Gridpanel Delete button (defult: 'Eliminar')
|
|
deleteIconCls : iconCls of the Delete button default: TDGi.iconMgr 'delete' )
|
|
|
|
*/
|
|
Ext.ux.crudGridPanel.crudPagingGrid = Ext.extend(Ext.ux.crudGridPanel.cruPagingGrid, {
|
|
constructor: function(config){
|
|
this.deleteIconCls = config.deleteIconCls ? config.deleteIconCls : Ext.ux.TDGi.iconMgr.getIcon('delete');
|
|
|
|
if(config.deleteButtonText)
|
|
this.deleteButtonText = config.deleteButtonText;
|
|
if(config.onDelete)
|
|
this.onDelete = config.onDelete;
|
|
|
|
/* Grid Configuration */
|
|
config = Ext.apply({
|
|
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.crudPagingGrid.superclass.constructor.call(this,config);
|
|
},
|
|
/* default top bar in the crud mode */
|
|
buildTbar: function(){
|
|
return [ {
|
|
text : this.addButtonText,
|
|
iconCls : this.addIconCls,
|
|
scope : this,
|
|
handler : this.onAdd
|
|
} , '->', {
|
|
text : this.editButtonText,
|
|
ref : '../editBtn',
|
|
iconCls : this.editIconCls,
|
|
disabled: true,
|
|
scope : this,
|
|
handler : this.onEdit
|
|
},{
|
|
text : this.deleteButtonText,
|
|
ref : '../deleteBtn',
|
|
iconCls : this.deleteIconCls,
|
|
disabled: true,
|
|
scope : this,
|
|
handler : this.onDelete
|
|
} ];
|
|
},
|
|
onDelete: function(){
|
|
Ext.MessageBox.confirm(this.deleteTitle, this.deleteMsg , this.doDelete, this);
|
|
},
|
|
doDelete: function(Button){
|
|
if(Button == 'yes'){
|
|
this.store.remove(this.selModel.getSelected());
|
|
|
|
/* Call method to disable buttons (now no row is selected)*/
|
|
this.onRowDeselect(this.selModel);
|
|
}
|
|
},
|
|
|
|
/* enable disable edit button */
|
|
onRowSelect: function(SelectionModel){
|
|
this.deleteBtn.setDisabled(false);
|
|
Ext.ux.crudGridPanel.crudPagingGrid.superclass.onRowSelect.call(this);
|
|
},
|
|
onRowDeselect: function(SelectionModel){
|
|
this.deleteBtn.setDisabled(true);
|
|
Ext.ux.crudGridPanel.crudPagingGrid.superclass.onRowDeselect.call(this);
|
|
},
|
|
/* overload of the storage creation method */
|
|
buildStore: function(configStore){
|
|
return new Ext.ux.crudGridPanel.crudStore(configStore);
|
|
},
|
|
/* Basic parameters of the object */
|
|
deleteTitle : 'Confirmación',
|
|
deleteMsg : '¿Está seguro que desea eliminar el registro seleccionado?',
|
|
deleteButtonText: 'Eliminar',
|
|
deleteIconCls : ''
|
|
|
|
});
|
|
|
|
/* GridPanel create mode enabled and special nullified w/o delete the record */
|
|
|
|
/*
|
|
|
|
inherits rPagingGrid configuration parameters. These are added by the class:
|
|
|
|
|
|
configForm : Configuration object for the Form creation
|
|
|
|
invalidTitle : Title of the Error msgBox form data is invalid (defult: 'Error al inrgesar')
|
|
invalidMsg : Msg of the Error msgBox form data is invalid (defult: 'Los datos ingresados no son validos')
|
|
|
|
addWindowTitle : Title of the Form Window when Adding an item (defult: 'Nuevo elemento')
|
|
addButtonText : Text of the Gridpanel Add button (defult: 'Agregar')
|
|
addIconCls : iconCls of the Add button and Add Form Window (default: TDGi.iconMgr 'add' )
|
|
|
|
cancelButtonText : Text of the Gridpanel Cancel/Null button (defult: 'Anular')
|
|
cancelIconCls : iconCls of the Cancel button (default: TDGi.iconMgr 'error' )
|
|
|
|
cancelTitle : Title of the Cancel msgBox confirmation (defult: 'Confirmación')
|
|
cancelMsg : Msg of the Cancel msgBox confirmation (defult: '¿Está seguro que desea anular el registro seleccionado?')
|
|
|
|
validFielName : Field of the record where the valid bool parameter is stored (default: 'valid')
|
|
canceledCls : Aditional CSS class for the invalid records (default: '')
|
|
|
|
*/
|
|
Ext.ux.crudGridPanel.crPagingGrid = Ext.extend(Ext.ux.crudGridPanel.rPagingGrid, {
|
|
constructor: function(config){
|
|
this.addIconCls = config.addIconCls ? config.addIconCls : Ext.ux.TDGi.iconMgr.getIcon('add');
|
|
this.cancelIconCls = config.editIconCls ? config.editIconCls : Ext.ux.TDGi.iconMgr.getIcon('error');
|
|
|
|
if(config.validFieldName)
|
|
this.validFieldName = config.validFieldName;
|
|
if(config.canceledCls)
|
|
this.canceledCls = config.canceledCls;
|
|
|
|
if(config.addButtonText)
|
|
this.addButtonText = config.addButtonText;
|
|
if(config.cancelButtonText)
|
|
this.cancelButtonText = config.cancelButtonText;
|
|
/* Grid Configuration */
|
|
config = Ext.apply({
|
|
listeners : this.setListeners()
|
|
}, config);
|
|
|
|
Ext.ux.crudGridPanel.crPagingGrid.superclass.constructor.call(this,config);
|
|
|
|
this.form = this.buildForm(config.configForm);
|
|
|
|
},
|
|
buildForm: function(config){
|
|
configWindow = {
|
|
title : this.addWindowTitle,
|
|
iconCls : this.addIconCls,
|
|
listeners : {
|
|
scope : this,
|
|
savebtn : this.onCreate,
|
|
previewbtn : this.onPreview,
|
|
closebtn : this.onClose
|
|
},
|
|
configForm: config
|
|
};
|
|
|
|
return new Ext.ux.crudGridPanel.baseWindowForm(configWindow);
|
|
},
|
|
/* default top bar in the cru mode */
|
|
buildTbar: function(){
|
|
return [ {
|
|
text : this.addButtonText,
|
|
iconCls : this.addIconCls,
|
|
scope : this,
|
|
handler : this.onAdd
|
|
} , '->', {
|
|
text : this.cancelButtonText,
|
|
ref : '../cancelBtn',
|
|
iconCls : this.cancelIconCls,
|
|
disabled: true,
|
|
scope : this,
|
|
handler : this.onCancel
|
|
} ];
|
|
},
|
|
/* manually destroy the form window */
|
|
onDestroy: function(){
|
|
this.form.destroy();
|
|
},
|
|
onPreview: Ext.emptyFn,
|
|
/* show a clean form to create a new record */
|
|
onAdd: function(){
|
|
/* Cleanup! */
|
|
this.form.show();
|
|
this.form.getForm().reset();
|
|
},
|
|
/* Take te form values and add the record to the storage (if valid)*/
|
|
onCreate: function(){
|
|
if (!this.form.getForm().isValid()){
|
|
Ext.Msg.show({
|
|
title : this.invalidTitle,
|
|
msg : this.invalidMsg,
|
|
icon : Ext.MessageBox.ERROR,
|
|
buttons : Ext.Msg.OK
|
|
});
|
|
return false;
|
|
}
|
|
else{
|
|
/* force each new creation to be valid */
|
|
var record = new this.store.recordType(this.form.getForm().getValues());
|
|
record.set(this.validFieldName,"on");
|
|
this.store.add(record);
|
|
this.store.reload();
|
|
this.form.hide();
|
|
}
|
|
},
|
|
onCancel: function(){
|
|
Ext.MessageBox.confirm(this.cancelTitle, this.cancelMsg , this.doCancel, this);
|
|
},
|
|
doCancel: function(Button){
|
|
if(Button == 'yes'){
|
|
var record = this.selModel.getSelected();
|
|
if(!record)
|
|
return false;
|
|
|
|
record.set(this.validFieldName,false);
|
|
record.commit();
|
|
|
|
/* Call method to disable buttons */
|
|
this.onRowDeselect();
|
|
}
|
|
},
|
|
/* customize the viewConf to give the canceled records a special class */
|
|
buildViewConf: function() {
|
|
|
|
return new Ext.grid.GridView({
|
|
forceFit : true,
|
|
validFieldName : this.validFieldName,
|
|
canceledCls : this.canceledCls,
|
|
getRowClass : this.getRowClass
|
|
});
|
|
|
|
},
|
|
getRowClass: function(Record){
|
|
if(!Record.get(this.validFieldName))
|
|
return this.canceledCls;
|
|
},
|
|
/* back button pressed, changes dissmised*/
|
|
onClose: function(){
|
|
this.form.hide();
|
|
},
|
|
/* enable/disable buttons */
|
|
onRowSelect: function(SelectionModel){
|
|
var record = this.selModel.getSelected();
|
|
if(!record){
|
|
this.cancelBtn.setDisabled(true);
|
|
return false;
|
|
}
|
|
|
|
if(!record.get(this.validFieldName))
|
|
this.cancelBtn.setDisabled(true);
|
|
else
|
|
this.cancelBtn.setDisabled(false);
|
|
|
|
},
|
|
onRowDeselect: function(SelectionModel){
|
|
this.cancelBtn.setDisabled(true);
|
|
},
|
|
/* overload of the storage creation method */
|
|
buildStore: function(configStore){
|
|
return new Ext.ux.crudGridPanel.cruStore(configStore);
|
|
},
|
|
setListeners: function(){
|
|
return {
|
|
scope : this,
|
|
datachanged : this.onRowDeselect,
|
|
rowselect : this.onRowSelect,
|
|
rowdeselect : this.onRowDeselect,
|
|
beforedestroy : this.onDestroy
|
|
};
|
|
},
|
|
/* Basic parameters of the object */
|
|
invalidTitle : 'Error al inrgesar',
|
|
invalidMsg : 'Los datos ingresados no son validos',
|
|
addWindowTitle : 'Nuevo elemento',
|
|
addButtonText : 'Agregar',
|
|
cancelButtonText: 'Anular',
|
|
|
|
cancelTitle : 'Confirmación',
|
|
cancelMsg : '¿Está seguro que desea anular el registro seleccionado?',
|
|
|
|
addIconCls : '',
|
|
cancelIconCls : '',
|
|
validFielName : 'valid',
|
|
canceledCls : ''
|
|
|
|
});
|