PDA

View Full Version : Tabpanel in a form.



salvachia
19 Jan 2011, 3:14 PM
Hi, i have a problem that makes me crazy, I spent a lot of time googling without any work out.

The thing is, i have a form with a tabpanel. When the form renders the first time and submit, only throws the fields in the first tab (index: 0). I've read i need to use "deferredRender: false", i use it, but not working, only sends the fields of the first tab, unless i active the other tabs.

The tabpanel part is:



{
xtype: 'tabpanel',
deferredRender: false, //AAAAAAAAAAAAAAAAQUIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII***********************************************
title: 'Mas Datos',
plain: true,
activeTab: 0,
defaults: {bodyStyle: 'padding: 5px', layout: 'form', labelWidth: 80},
anchor: "100% -90",
items:[
{
title: 'Situacion',
defaults: { anchor: '99%'},
items:[
{
xtype: 'combo',
fieldLabel: 'Primario',
name: 'primario_label',
hiddenName: 'primario',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=articulos_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: true
},{
xtype: 'combo',
fieldLabel: 'Familia',
name: 'familia',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=familia&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Tipo',
name: 'tipo',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=tipo&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Uso',
name: 'uso',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=uso&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
}]
},{
title: 'Fechas',
defaults: {anchor: '99%'},
items:[
{
xtype: 'datefield',
fieldLabel: 'Alta',
name: 'alta',
allowBlank: false,
format: 'd/m/Y'
},{
xtype: 'datefield',
fieldLabel: 'Inicio',
name: 'inicio',
allowBlank: false,
format: 'd/m/Y'
},{
xtype: 'datefield',
fieldLabel: 'Baja',
name: 'baja',
format: 'd/m/Y'
}
]
},{
title: 'Datos numéricos',
defaults: {anchor: '99%', textAlign: 'right'},
items:[
{
xtype: 'numberfield',
fieldLabel: 'Cantidad',
name: 'cantidad',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Coste',
name: 'coste',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Valor',
name: 'valor',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Vida(años)',
name: 'vida',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Igic',
name: 'igic',
allowBlank: false
}
]
},{
title: 'Datos logísticos',
defaults: {anchor: '99%'},
items:[
{
xtype: 'combo',
fieldLabel: 'Incorporacion',
name: 'incorporacion',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=incorporacion&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Estado',
name: 'estado',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=estado&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Proveedor',
name: 'proveedor_label',
hiddenName: 'proveedor',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=proveedores_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Propietario',
name: 'propietario_label',
hiddenName: 'propietario',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=propietarios_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Localizacion',
name: 'localizacion_label',
hiddenName: 'localizacion',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=localizaciones_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: false
}
]
}


The form is it:



var form_articulos = new Ext.FormPanel({
method: 'POST',
url : 'prueba_db.php',
tittle: 'Añadir/Editar articulos',
monitorValid: true,
baseCls: 'x-plain',
buttonAlign: 'center',
labelWidth:60,
padding: 5,
baseParams: {accion: 'insertar', tabla: 'articulos'},
items:[
{
xtype: 'textfield',
fieldLabel: 'Nombre',
name: 'nombre',
allowBlank: false,
anchor: '100%'
},{
xtype: 'container',
anchor: '100%',
layout: { type: 'hbox'},
items: [
{
xtype: 'container',
flex: .8,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Modelo',
name: 'modelo',
anchor: "100%",
allowBlank: false
}]
},{
xtype: 'spacer',
width: 10
},{
xtype: 'container',
flex: .8,
layout: 'form',
items: [{
xtype: 'textfield',
anchor: "100%",
fieldLabel: 'Matricula',
name: 'matricula',
allowBlank: false
}]
}
]
},{
anchor: '100%',
xtype: 'combo',
fieldLabel: 'Marca',
name: 'marca',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=marca&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'spacer',
height: 10
},{
xtype: 'tabpanel',
deferredRender: false, //AAAAAAAAAAAAAAAAQUIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII***********************************************
title: 'Mas Datos',
plain: true,
activeTab: 0,
defaults: {bodyStyle: 'padding: 5px', layout: 'form', labelWidth: 80},
anchor: "100% -90",
items:[
{
title: 'Situacion',
defaults: { anchor: '99%'},
items:[
{
xtype: 'combo',
fieldLabel: 'Primario',
name: 'primario_label',
hiddenName: 'primario',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=articulos_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: true
},{
xtype: 'combo',
fieldLabel: 'Familia',
name: 'familia',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=familia&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Tipo',
name: 'tipo',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=tipo&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Uso',
name: 'uso',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=uso&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
}]
},{
title: 'Fechas',
defaults: {anchor: '99%'},
items:[
{
xtype: 'datefield',
fieldLabel: 'Alta',
name: 'alta',
allowBlank: false,
format: 'd/m/Y'
},{
xtype: 'datefield',
fieldLabel: 'Inicio',
name: 'inicio',
allowBlank: false,
format: 'd/m/Y'
},{
xtype: 'datefield',
fieldLabel: 'Baja',
name: 'baja',
format: 'd/m/Y'
}
]
},{
title: 'Datos numéricos',
defaults: {anchor: '99%', textAlign: 'right'},
items:[
{
xtype: 'numberfield',
fieldLabel: 'Cantidad',
name: 'cantidad',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Coste',
name: 'coste',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Valor',
name: 'valor',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Vida(años)',
name: 'vida',
allowBlank: false
},{
xtype: 'numberfield',
fieldLabel: 'Igic',
name: 'igic',
allowBlank: false
}
]
},{
title: 'Datos logísticos',
defaults: {anchor: '99%'},
items:[
{
xtype: 'combo',
fieldLabel: 'Incorporacion',
name: 'incorporacion',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=incorporacion&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Estado',
name: 'estado',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?lista=estado&tabla=articulos", method: 'GET'}),
fields: ["item"]
}),
displayField: 'item',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Proveedor',
name: 'proveedor_label',
hiddenName: 'proveedor',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=proveedores_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Propietario',
name: 'propietario_label',
hiddenName: 'propietario',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=propietarios_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Localizacion',
name: 'localizacion_label',
hiddenName: 'localizacion',
valueField: 'id',
triggerAction: 'all',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: "prueba_db.php?tabla=localizaciones_1", method: 'GET'}),
fields: ["id","nombre"],
autoLoad: true
}),
displayField: 'nombre',
allowBlank: false
}
]
}
]
}],
buttons : [{
text : "Aceptar",
formBind : true,
handler : function() {
form_articulos.getForm().submit({
success : function() {
vent_formularios.hide();
datos_articulos.reload();
Ext.MessageBox.alert("Aviso","Guardado correcto");
},
failure : function(f,r) {
var respuesta = Ext.decode(r.response.responseText);
Ext.MessageBox.alert("Error","Error en el guardado.<br>ERROR:<br>" + respuesta.error);
}
})
}
},{
text : "Cancelar",
handler : function() {
vent_formularios.hide();
}
}]
});


You can see the app in the web http://tystar.zobyhost.com/test and the way to reproduce is:

1 Press "Ver"->"Articulos".
2 Click (select) any row.
3 Press "Editar".
4 Press "Aceptar".

(If Aceptar is disabled, active the second tab of the tabpanel and it should activate). If u see an error window saying

"Error en el guardado.
ERROR:
Error en la cantidad de parámetros pasados,
son menos de los 23 esperados"

but if navigate over the four tabs, you'll see:

"Guardado correcto".

Any ideas?

Thanks!

jay@moduscreate.com
20 Jan 2011, 6:53 AM
That's a critical downfall for deferred render of form input fields for Ext JS 3. For Ext 4, this problem goes away.

To solve this, I suggest setting up a "getEmptyData" method, which returns a constructed object, containing a key for every field.

From there, I would merge the form values with the defaults from the getEmptyData method. Then you can inject that into form submit (or a separate ajax call).

The problem then becomes, when you set the data, the deferred items are NOT set when rendered. This gets tricky, because you'll need to setup an 'activate' listener on each tab, and set values accordingly.

niksu
20 Jan 2011, 7:30 AM
www.google.com

salvachia
25 Jan 2011, 4:49 AM
Thank you!