PDA

View Full Version : [FIXED-EXTJSIV-1685][B3] Slow validation and css issue on forms with tabs



Nom4d3
18 Apr 2011, 6:21 AM
I have a form with 3 tabs and about 10 fields in each tab. When I press Submit, the validation takes about 5 seconds do validate the whole form and the invalid textfields of inactive tabs gets a weird style. On the active tab the textfields still normal.

The code of my form and a screenshot are below.


this.formPanel = Ext.create('Ext.form.FormPanel', {
items: {
xtype: 'tabpanel',
activeTab: 0,
defaults:{
bodyStyle: 'padding:10px'
},
items:[
{
title:'Dados Pessoais',
defaults: {
border: false,
layout: 'hbox'
},
items: this.buildForm1()
},
{
title:'Dados dos Pais',
defaults: {
border: false,
layout: 'hbox'
},
items: this.buildForm2()
},
{
title:'Dados Complementares',
defaults: {
border: false,
layout: 'hbox'
},
items: this.buildForm3()
}
]
},
buttons: this.buildButtons()
});



buildForm1: function() {
return [
{ name: 'int_id', xtype: 'hidden' },
{ items: { fieldLabel: 'Nome', name: 'int_nome', allowBlank: false, maxLength: '100', xtype: 'textfield', flex: 1 } },
{ defaults: { allowBlank: false },
items: [
{ fieldLabel: 'Nascimento', name: 'int_nascimento', xtype: 'datefield', flex: 2, plugins: [new Ux.InputTextMask('99/99/9999')], margins: '0 5 0 0' },
{ fieldLabel: 'E-mail', name: 'int_email', maxLength: '100', xtype: 'textfield', vtype: 'email', flex: 5 },
]
},
{ defaults: { flex: 1, xtype: 'textfield', allowBlank: false },
items: [
{ fieldLabel: 'Telefone', name: 'int_telefone', plugins: [ new Ux.InputTextMask('(99) 9999-9999') ], margins: '0 5 0 0' },
{ fieldLabel: 'Celular', name: 'int_celular', plugins: [ new Ux.InputTextMask('(99) 9999-9999') ] }
]
},
{ defaults: { xtype: 'textfield', allowBlank: false },
items: [
{ fieldLabel: 'Endereço', name: 'int_endereco', maxLength: '100', flex: 3, margins: '0 5 0 0' },
{ fieldLabel: 'Bairro', name: 'int_bairro', maxLength: '50', flex: 2 }
]
},
{ defaults: { xtype: 'textfield', allowBlank: false, margins: '0 5 0 0' },
items: [
{ fieldLabel: 'Cidade', name: 'int_cidade', maxLength: '50', flex: 6 },
{ fieldLabel: 'Estado', name: 'int_estado', xtype: 'combo', flex: 4,
store: new Ext.data.ArrayStore({ fields: ['valor','texto'], data: Const.arrayEstados })
},
{ fieldLabel: 'CEP', name: 'int_cep', maxLength: '10', flex: 3, plugins: [ new Ux.InputTextMask('99999-999') ], margins: '0' },
]
},
{ items: [ this.ComboDistritos, this.ComboClubes ] }
];
},

buildForm2: function() {
return [
{ xtype: 'fieldset', title: 'Dados da Mãe', layout: 'anchor', defaults: { border: false, layout: 'hbox' }, items: [
{ defaults: { xtype: 'textfield' },
items: [
{ fieldLabel: 'Nome', name: 'int_mae_nome', maxLength: '100', xtype: 'textfield', flex: 3, margins: '0 5 0 0' },
{ fieldLabel: 'Ocupação', name: 'int_mae_ocupacao', maxLength: '20', flex: 2 }
]
},
{ defaults: { flex: 1, xtype: 'textfield' },
items: [
{ fieldLabel: 'Telefone', name: 'int_mae_telefone', plugins: [ new Ux.InputTextMask('(99) 9999-9999') ], margins: '0 5 0 0' },
{ fieldLabel: 'Celular', name: 'int_mae_celular', plugins: [ new Ux.InputTextMask('(99) 9999-9999') ], margins: '0 5 0 0' },
{ fieldLabel: 'E-mail', name: 'int_mae_email', maxLength: '100', vtype: 'email', flex: 2 }
]
},
{ defaults: { xtype: 'textfield' },
items: [
{ fieldLabel: 'Clube', name: 'int_mae_club', maxLength: '50', xtype: 'textfield', flex: 1 }
]
}
]},


{ xtype: 'fieldset', title: 'Dados do Pai', layout: 'anchor', defaults: { border: false, layout: 'hbox' }, items: [
{ defaults: { xtype: 'textfield' },
items: [
{ fieldLabel: 'Nome', name: 'int_pai_nome', maxLength: '100', xtype: 'textfield', flex: 3, margins: '0 5 0 0' },
{ fieldLabel: 'Ocupação', name: 'int_pai_ocupacao', maxLength: '20', flex: 2 }
]
},
{ defaults: { flex: 1, xtype: 'textfield', margins: '0 5 0 0' },
items: [
{ fieldLabel: 'Telefone', name: 'int_pai_telefone', plugins: [ new Ux.InputTextMask('(99) 9999-9999') ] },
{ fieldLabel: 'Celular', name: 'int_pai_celular', plugins: [ new Ux.InputTextMask('(99) 9999-9999') ] },
{ fieldLabel: 'E-mail', name: 'int_pai_email', maxLength: '100', vtype: 'email', flex: 2, margins: '0 0 0 0' }
]
},
{ defaults: { xtype: 'textfield' },
items: [
{ fieldLabel: 'Clube', name: 'int_pai_club', maxLength: '50', xtype: 'textfield', flex: 1 }
]
}
]}
];
},


buildForm3: function() {
return [
{ defaults: { flex: 1, xtype: 'combo' },
items: [
{ fieldLabel: 'Situação dos Pais', name: 'int_situacao_pais', margins: '0 5 0 0',
store: new Ext.data.ArrayStore({ fields: ['valor','texto'], data: Const.arrayEstadoCivil })
},
{ fieldLabel: 'Mora Com', name: 'int_mora_com',
store: new Ext.data.ArrayStore({ fields: ['valor','texto'], data: Const.arrayMoraCom })
}
]
},
{ items: { fieldLabel: 'Pratica Esportes? Quais?', name: 'int_esportes', xtype: 'textfield', flex: 1, labelSeparator: '' } },
{ items: { fieldLabel: 'Bebidas Alcoolicas? Quais?', name: 'int_bebidas', xtype: 'textfield', flex: 1, labelSeparator: '' } },
{ items: { fieldLabel: 'Uso de Drogas? Quais?', name: 'int_drogas', xtype: 'textfield', flex: 1, labelSeparator: '' } },
{ defaults: { flex: 1, xtype: 'combo', labelSeparator: '' },
items: [
{ fieldLabel: 'Fumante?', name: 'int_fumante', margins: '0 5 0 0',
store: new Ext.data.ArrayStore({ fields: ['valor','texto'], data: Const.arraySimNao })
},
{ fieldLabel: 'Ficaria sem namorar?', name: 'int_sem_namoro',
store: new Ext.data.ArrayStore({ fields: ['valor','texto'], data: Const.arraySimNao })
}
]
}
];
}

25696

Nom4d3
18 Apr 2011, 6:39 AM
I'm looking on the developer tools and the property 'height' of these fields change from 21 to 35 after validation.

evant
24 Apr 2011, 10:46 PM
There's stuff in your test case that you haven't included so I can't run it. Please post a runnable test case.

Nom4d3
25 Apr 2011, 4:40 AM
I put together all the code necessary to run it. Tested on Opera 11.10, Chrome 12 and Firefox 4.

25778

jjohnston
25 Apr 2011, 12:18 PM
Thank you for reporting these issues; both the performance and the layout issue have been fixed.