PDA

View Full Version : Second Level Form not Working



catequil
26 Jul 2014, 2:29 PM
Hi, I have a problem, and I’m pretty sure it’s something silly, and basic, I’m a newby in ExtJS, here it goes.

I’m working with ExtJS 4.2, sencha CMD 4.0.2, my app is builded with the MVC pattern.

I have a controller that handle the events of my form (I have a couple of tabs in my first window that holds the fields I have to save/update).

I have a grid (first grid) with a menu and a button that open a window (first window) with my tabs and the main form, within that window I have a tab that holds a grid (second grid), that grid have a button that open another window (second window) with another form to fill the data needed to create the records for the second grid, that form has a button to save the information into the store of the second grid, but when I click the button to save the data, its not saved into the store.

Thank you very much guys!!!.

Here is the code (as suggested):

This is my main controller (I’ve removed other functions that are not been used):


Ext.define('sisscsj.controller.beneficiario.BeneficiarioOcupacion', {
extend: 'sisscsj.controller.Base',
stores: [
'beneficiario.BeneficiarioOcupacion'
],
views: [
'beneficiario.Beneficiario.ListaOcupacion',
'beneficiario.Beneficiario.edit.FormOcupacion',
'beneficiario.Beneficiario.edit.WindowOcupacion'
],
refs: [
{
ref: 'BeneficiarioOcupacionLista',
selector: '[xtype=beneficiario.beneficiario.listaocupacion]'
},
{
ref: 'BeneficiarioOcupacionWindow',
selector: '[xtype=beneficiario.beneficiario.edit.windowocupacion]'
},
{
ref: 'BeneficiarioOcupacionForm',
selector: '[xtype=beneficiario.beneficiario.edit.formocupacion]'
}
],
init: function() {
this.listen({
controller: {},
component: {
'grid[xtype=beneficiario.beneficiario.listaocupacion]': {
/*beforerender: this.loadRecords,*/
itemdblclick: this.edit
},
'grid[xtype=beneficiario.beneficiario.listaocupacion] button#add': {
click: this.add
},
'grid[xtype=beneficiario.beneficiario.listaocupacion] button#edit': {
click: this.edit
},
'grid[xtype=beneficiario.beneficiario.listaocupacion] button#delete': {
click: this.remove
},
'window[xtype=beneficiario.beneficiario.edit.windowocupacion] button#save': {
click: this.save
},
'window[xtype=beneficiario.beneficiario.edit.windowocupacion] button#cancel': {
click: this.close
}
},
global: {},
store: {},
proxy: {}
});
},
........
save: function(button, e, eOpts) {
var me = this,
grid = me.getBeneficiarioOcupacionLista(),
store = grid.getStore(),
win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues(),
callbacks;

// set values of record from form
record.set(values);
console.log(values);
console.log(record);
// check if form is even dirty...if not, just close window and stop everything...nothing to
see here
if (!record.dirty) {
win.close();
return;
}
// setup generic callback config for create/save methods
callbacks = {
success: function(records, operation) {
store.reload();
win.close();
},
failure: function(records, operation) {
// if failure, reject changes in store
store.rejectChanges();
}
};

// mask to prevent extra submits
//Ext.getBody().mask('Guardando Ocupación ...');
// if new record...
if (record.phantom) {
// reject any other changes
console.log(store);
store.rejectChanges();
// add the new record
store.add(record);
}
// persist the record
store.sync(callbacks);
},
.....
});


This is my model:


Ext.define('sisscsj.model.beneficiario.BeneficiarioOcupacion', {
extend: 'sisscsj.model.Base',
idProperty: 'id_beneficiario_ocupacion',
fields: [
// id field
{
name: 'id_beneficiario_ocupacion',
type: 'int',
useNull: true
},
{
name: 'fk_id_beneficiario',
type: 'int',
useNull: true
},
{
name: 'fk_id_ocupacion',
type: 'int',
useNull: true
},// campos simples
{
name: 'fecha_beneficiario_ocupacion',
type: 'date',
dateFormat: 'Y-m-d',
useNull: true
},
{
name: 'estado_beneficiario_ocupacion',
type: 'int',
useNull: true
},
{
name: 'observacion_beneficiario_ocupacion',
type: 'string',
useNull: true
}
]
});

This is my store (memory only for the moment):


Ext.define('sisscsj.store.beneficiario.BeneficiarioOcupacion', {
extend: 'Ext.data.Store',
alias: 'sisscsj.store.beneficiario.beneficiarioocupacion',
requires: [
'sisscsj.model.beneficiario.BeneficiarioOcupacion'
],
storeId: 'BeneficiarioOcupacion',
model: 'sisscsj.model.beneficiario.BeneficiarioOcupacion',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'beneficiario_ocupacion'
},
writer: {
type: 'json',
root: 'beneficiario_ocupacion'
}
}
});

This is my second grid:


Ext.define('sisscsj.view.beneficiario.Beneficiario.ListaOcupacion', {
extend: 'Ext.grid.Panel',
alias: 'widget.beneficiario.beneficiario.listaocupacion',
requires: [
'Ext.toolbar.Paging',
'sisscsj.model.opciones.Ocupacion'
],
minHeight: 250,
store: 'BeneficiarioOcupacion',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
selType: 'rowmodel',
columns: {
defaults: {
flex: 1
},
items: [
{
text: 'Ocupación',
dataIndex: 'fk_id_ocupacion'
},
{
text: 'Fecha de Ocupación',
dataIndex: 'fecha_beneficiario_ocupacion'
},
{
text: 'Estado Ocupación',
dataIndex: 'estado_beneficiario_ocupacion'
},
{
text: 'Observaciones Ocupación',
dataIndex: 'observacion_beneficiario_ocupacion'
}
]
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
items: [
{
xtype: 'button',
itemId: 'add',
iconCls: 'icon_add',
text: 'Añadir'
},
{
xtype: 'button',
itemId: 'edit',
iconCls: 'icon_edit',
text: 'Editar'
},
{
xtype: 'button',
itemId: 'delete',
iconCls: 'icon_delete',
text: 'Eliminar'
}
]
}
]
});
me.callParent(arguments);
}
});

This is my second Window:


Ext.define('sisscsj.view.beneficiario.Beneficiario.edit.WindowOcupacion', {
extend: 'Ext.window.Window', alias: 'widget.beneficiario.beneficiario.edit.windowocupacion',
requires: [
'sisscsj.view.beneficiario.Beneficiario.edit.FormOcupacion'
],
iconCls: 'icon_user',
width: 600,
modal: true,
resizable: true,
draggable: true,
constrainHeader: true,
layout: 'fit',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
// include form
xtype: 'beneficiario.beneficiario.edit.formocupacion'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [
{
xtype: 'button',
itemId: 'cancel',
text: 'Cancelar',
iconCls: 'icon_delete'
},
'->',
{
xtype: 'button',
itemId: 'save',
text: 'Guardar',
iconCls: 'icon_save'
}
]
}
]
});
me.callParent(arguments);
}
});

This is my second Form:


Ext.define('sisscsj.view.beneficiario.Beneficiario.edit.FormOcupacion', {
extend: 'Ext.form.Panel',
alias: 'widget.beneficiario.beneficiario.edit.formocupacion',
requires: [
'Ext.form.FieldContainer',
'Ext.form.field.Text',
'Ext.form.field.ComboBox',
'sisscsj.ux.form.field.RemoteComboBox'
], bodyPadding: 5,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
fieldDefaults: {
allowBlank: false,
labelAlign: 'top',
flex: 1,
margins: 5
},
defaults: {
layout: 'hbox',
margins: '0 10 0 10'
},
items: [
{
xtype: 'fieldcontainer',
items: [
{
xtype: 'ux.form.field.remotecombobox',
name: 'fk_id_ocupacion',
fieldLabel: 'Ocupación:',
displayField: 'nombre_ocupacion',
valueField: 'id_ocupacion',
store: {
type: 'opciones.ocupacion'
},
plugins: [
{ ptype: 'cleartrigger' }
],
editable: false,
forceSelection: true
},
{
xtype: 'datefield',
name: 'fecha_beneficiario_ocupacion',
fieldLabel: 'Fecha Ocupación',
format: 'Y-m-d',
submitFormat: 'Y-m-d'
}
]
},
{
xtype: 'fieldcontainer',
items: [
{
xtype: 'combo',
name: 'estado_beneficiario_ocupacion',
fieldLabel: 'Estado:',
displayField: 'nombre',
valueField: 'valor',
store: LocalStoreEstado,
plugins: [
{ ptype: 'cleartrigger' }
],
editable: false,
forceSelection: true
}
]
},{
xtype: 'fieldcontainer',
items: [
{
xtype: 'htmleditor',
name: 'observacion_beneficiario_ocupacion',
fieldLabel: 'Observaciones Ocupación',
height: 200
}
]
}
]
});
me.callParent(arguments);
}
});

This is the tab that holds the second grid:


Ext.define('sisscsj.view.beneficiario.Beneficiario.edit.tab.Ocupacion', {
extend: 'Ext.panel.Panel',
alias: 'widget.beneficiario.edit.tab.ocupacion',
bodyPadding: 0,
margin: -5,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'beneficiario.beneficiario.listaocupacion',
title: 'Administración de Ocupaciones',
iconCls: 'icon_color',
store: Ext.create( 'sisscsj.store.beneficiario.BeneficiarioOcupacion', {
pageSize: 10
})
}
]
});
me.callParent(arguments);
}
})

My Homework:
I’ve checked the record (based on the model) created to insert the data in my second grid, and the
form assings the correct data into the record, the problen is that that record is not saved in the
store.
I don’t get any errors or warnings in Firebug.
The data loads correctly in the corresponding fields

I've added a PDF file with some printscreens so you can see what I mean in case I didn't express myself clearly enough.

Thanks again.

chramer
30 Jul 2014, 1:39 AM
The problem might be in your 'save' method:
'form.getRecord' will return return undefined if you didn't previously do 'form.loadRecord', and I didn't see this in the code you provided.

P.S.
Post the content of the PDF file in the topic.

catequil
15 Aug 2014, 7:23 AM
chramer, thank you for your response, I finally solved the problem, the problem was in the save method as you suggested, but not exactly in the same place (acctually your comment helped me this week in other problem I had, thank you for that), the problem was in this code:


callbacks = {
success: function(records, operation) {
store.reload();
win.close();
},
failure: function(records, operation) {
store.rejectChanges();
}
};

This is my callback object that is executed after syncing the store, the problem was that my store is in memory, so, when Ext executes the "store.reload();" line, the store deletes the newly added record (in background), thats why my grid never shower a single record. (This is what I want to think that happened, at least it looks logical, if I'm wrong please let me know).

The solution was simple... I didnt reloaded the store and the grid began to show the records:


callbacks = {
success: function(records, operation) {
//store.reload();
win.close();
},
failure: function(records, operation) {
store.rejectChanges();
}
};

I hope this help others (newbies like me).