PDA

View Full Version : (Resolved) MsgTarget position on the form



fabiojpoli
8 Sep 2010, 10:20 AM
Good afternoon, I have a problem with this icon field validation, I have two tabs, my button that submits the form ta tab 2, if I click save, the icon of validation of the field appears correctly on the right side of the field regardless of how many times I click save without complying with the fields, but with the fields of tab1, every time I click save, the icons are being deallocated more to the right, spoiling the layout follows the img attached.

when you click save the first time (img1)
when you click save in the second inning (img2)
when you click save at the third time (img3)
...

Someone has gone through this? Thanks!
22286
22287
22288

darthwes
8 Sep 2010, 10:32 AM
Are you assigning the same ID to the form fields? Can we see some formatted code?

fabiojpoli
8 Sep 2010, 11:45 AM
No, every field has its ID, some fields do not have ID, below is the code:


this.panelFotoMembro = new Ext.Panel({
width: 98,
height: 40,
bodyStyle: 'padding: 5px 0px 5px 0px; align:center; margin-right: 10px;',
flex: 1,
border: false,
items: [new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: 'fotos/' + this.idMembro + '.png',
id: 'fotoMembro'
}
})]
});


Ext.form.Field.prototype.msgTarget = 'side';

this.formMembroLeft = new Ext.Panel({
border : false,
width: 665,
flex: 3,
items: [{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 30
},
items: [{
width: 330,
labelWidth: 55,
items: {
name : 'nome',
maxLength : 100,
maxLengthText : 'Máximo 100 caracteres.',
fieldLabel: 'Nome',
emptyText: 'Nome Completo',
width : 250,
allowBlank: false
}
},{
width: 135,
items: {
xtype: 'combo',
name:'sexo',
id: 'sexo',
allowBlank: false,
mode: 'local',
store: arrSexo,
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Sexo',
width : 80,
listeners: {
scope:this,
select: this.carregarCampoConjuge
}
}
},{
width: 180,
items: {
xtype: 'fileuploadfield',
name: 'foto',
emptyText: 'Selecione uma foto',
fieldLabel: 'Foto',
width : 140,
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 180,
labelWidth: 55,
items: {
xtype : 'datefield',
name : 'data_nasc',
fieldLabel: 'Dt. nasc.',
emptyText: 'Nascimento',
plugins: [new Ext.ux.InputTextMask('99/99/9999', false)],
width : 95,
allowBlank: false
}
},{
width: 150,
labelWidth: 25,
items: {
name : 'cpf',
fieldLabel: 'CPF',
plugins: [new Ext.ux.InputTextMask('999.999.999-99', false)],
width : 100
}
},{
width: 135,
labelWidth: 30,
items: {
name : 'rg',
fieldLabel: 'RG',
plugins: [new Ext.ux.InputTextMask('9.999.999-9', false)],
width : 80
}
},{
width: 195,
labelWidth: 30,
items: {
name : 'cep',
fieldLabel: 'CEP',
plugins: [new Ext.ux.InputTextMask('99.999-999')],
width : 140,
allowBlank: false
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 330,
labelWidth: 55,
items: {
name : 'rua',
fieldLabel: 'Rua',
emptyText: 'Rua e Número',
width : 250,
maxLength : 100,
maxLengthText : 'Máximo 100 caracteres.',
allowBlank: false
}
},{
width: 330,
labelWidth: 55,
items: {
name : 'complemento',
fieldLabel: 'Complem.',
width : 250,
maxLength : 50,
maxLengthText : 'Máximo 50 caracteres.'
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 260,
labelWidth: 55,
items: {
name : 'bairro',
fieldLabel: 'Bairro',
width : 180,
maxLength : 50,
maxLengthText : 'Máximo 50 caracteres.',
allowBlank: false
}
},{
width: 88,
labelWidth: 15,
items: {
xtype : 'combo',
name : 'estado',
fieldLabel: 'UF',
id:'uf',
store: this.storeUf,
width : 45,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'uf',
allowBlank: false,
listeners: {
scope:this,
select: function(){
this.listarCidades(Ext.getCmp('uf'), Ext.getCmp('cidade'))
}
}
}
},{
width: 313,
labelWidth: 40,
items: {
xtype : 'combo',
name : 'cidade',
id: 'cidade',
fieldLabel: 'Cidade',
width : 248,
store: this.storeCidades,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao',
disabled: true,
allowBlank: false
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 220,
labelWidth: 55,
items: {
name : 'tel_resid',
fieldLabel: 'Tel. Res.',
plugins: [new Ext.ux.InputTextMask('(99)9999-9999')],
width : 135
}
},{
width: 240,
labelWidth: 80,
items: {
name : 'tel_comercial',
fieldLabel: 'Tel. Comercial',
plugins: [new Ext.ux.InputTextMask('(99)9999-9999')],
width : 135
}
},{
width: 200,
labelWidth: 40,
items: {
name : 'celular',
fieldLabel: 'Celular',
plugins: [new Ext.ux.InputTextMask('(99)9999-9999')],
width : 133
}
}]
}]
});


this.formMembroBottom = new Ext.Panel({
id: 'panelFormBottom',
border : false,
items: [{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 30
},
items: [{
width: 330,
labelWidth: 55,
items: {
name : 'email',
fieldLabel: 'Email',
vtype: 'email',
width : 250,
maxLength : 50,
maxLengthText : 'Máximo 50 caracteres.',
allowBlank: false
}
},{
width: 250,
labelWidth: 55,
items: {
xtype : 'combo',
name : 'profissao',
fieldLabel: 'Profissão',
width : 170,
store: this.storeProfissao,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao'
}
},{
width: 200,
labelWidth: 48,
items: {
xtype : 'combo',
name : 'estado_civil',
id: 'estado_civil',
fieldLabel: 'Est. Civil',
emptyText: 'Estado Civil',
store: this.storeEstadoCivil,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao',
width : 123,
allowBlank: false,
listeners: {
scope:this,
select: this.habilitaCamposCasado
}
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 330,
labelWidth: 55,
items: {
xtype : 'combo',
name : 'conjuge',
id: 'conjuge',
fieldLabel: 'Cônjuge',
width : 270,
disabled: true,
allowBlank: false,
store: this.storeConjuge,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'nome'
}
},{
width: 65,
items: {
xtype : 'checkbox',
name : 'checkConjuge',
id: 'checkConjuge',
fieldLabel: 'Novo',
disabled: true,
listeners: {
scope:this,
check: this.habilitaNovoConjuge
}
}
},{
width: 340,
labelWidth: 50,
items: {
name : 'novoConjuge',
id : 'novoConjuge',
fieldLabel: 'Cônjuge',
emptyText: 'Novo Cônjuge não Cadastrado',
width : 260,
allowBlank: false,
disabled: true
}
},{
width: 25,
items: {
xtype : 'button',
id: 'btnNovoConjuge',
iconCls: 'silk-save',
disabled: true,
handler: this.cadastrarConjuge
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 180,
labelWidth: 55,
items: {
xtype : 'datefield',
name : 'data_casamento',
id: 'data_casamento',
fieldLabel: 'Dt. cas.',
plugins: [new Ext.ux.InputTextMask('99/99/9999', false)],
emptyText: 'Casamento',
width : 95,
disabled: true
}
},{
width: 120,
labelWidth: 70,
items: {
xtype : 'numberfield',
name : 'qtde_filhos',
fieldLabel: 'Qtde. filhos',
width : 25,
maxLength : 2,
maxLengthText : 'Máximo 2 caracteres.'
}
},{
width: 125,
labelWidth: 52,
items: {
xtype : 'combo',
name : 'uf_nasc',
id: 'uf_nasc',
fieldLabel: 'UF Nasc.',
store: this.storeUf,
width : 43,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'uf',
allowBlank: false,
listeners: {
scope:this,
select: function(){
this.listarCidades(Ext.getCmp('uf_nasc'), Ext.getCmp('cidade_nasc'))
}
}
}
},{
width: 351,
labelWidth: 75,
items: {
xtype : 'combo',
name : 'cidade_nasc',
id: 'cidade_nasc',
fieldLabel: 'Cidade Nasc.',
emptyText: 'Cidade de Nascimento',
store: this.storeCidadesNasc,
width : 251,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao',
disabled: true,
allowBlank: false
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 400,
labelWidth: 55,
items: {
name : 'mae',
fieldLabel: 'Mãe',
width : 320,
maxLength : 100,
maxLengthText : 'Máximo 100 caracteres.'
}
},{
width: 380,
labelWidth: 25,
items: {
name : 'pai',
fieldLabel: 'Pai',
width : 328,
maxLength : 100,
maxLengthText : 'Máximo 100 caracteres.'
}
}]
}]
});


this.membroCongregacional = new Ext.Panel({
border : false,
items: [{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 30
},
items: [{
width: 330,
labelWidth: 55,
items: {
xtype : 'combo',
name : 'tipo',
id : 'tipo',
fieldLabel: 'Tipo',
store: this.storeTipos,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao',
width : 250,
allowBlank: false,
listeners: {
scope:this,
select: this.habilitarMembro
}
}
},{
width: 122,
labelWidth: 85,
items: {
xtype : 'checkbox',
name : 'possui_cartao',
id : 'possui_cartao',
fieldLabel: 'Possui Cartão?',
disabled: true,
width : 30
}
},{
width: 155,
labelWidth: 90,
items: {
xtype : 'numberfield',
name : 'selo_ano',
id : 'selo_ano',
fieldLabel: 'Ano atualização',
emptyText: 'Selo',
width : 40,
allowBlank:false,
disabled: true,
maxLength : 4,
maxLengthText : 'Máximo 4 caracteres.'
}
},{
width: 172,
labelWidth: 78,
items: {
xtype : 'numberfield',
name : 'codigo',
id : 'codigo',
fieldLabel: 'Cód. Membro',
disabled: true,
width : 68,
maxLength : 6,
maxLengthText : 'Máximo 6 caracteres.',
allowBlank: false
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 170,
labelWidth: 55,
items: {
xtype : 'datefield',
name : 'data_batismo',
id : 'data_batismo',
plugins: [new Ext.ux.InputTextMask('99/99/9999', false)],
emptyText: 'Batismo',
fieldLabel: 'Dt. batis.',
allowBlank: false,
disabled: true,
width : 95
}
},{
width: 230,
labelWidth: 48,
items: {
xtype : 'combo',
name : 'situacao',
fieldLabel: 'Situação',
emptyText: 'Situação Atual',
width : 157,
store: this.storeSituacoes,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao',
allowBlank: false
}
},{
width: 165,
labelWidth: 55,
items: {
xtype : 'combo',
name : 'ministerio',
id : 'ministerio',
fieldLabel: 'Ministério',
disabled: true,
width : 85,
store: this.storeMinisterios,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao',
allowBlank: false
}
},{
width: 215,
labelWidth: 175,
items: {
xtype : 'checkbox',
name : 'batizado_es',
fieldLabel: 'Batizado com o Espírito Santo?'
}
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width:390,
labelWidth: 55,
items: [{
xtype: 'lovcombo',
name: 'departamentos',
fieldLabel: 'Deptos.',
width: 310,
store: this.storeDepartamento,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao'
}]
},{
width:390,
labelWidth: 50,
items: [{
xtype: 'lovcombo',
name: 'funcoes',
fieldLabel: 'Funções',
width: 313,
store: this.storeFuncao,
mode: 'local',
triggerAction: 'all',
forceSelection: true,
valueField : 'id',
displayField : 'descricao'
}]
}]
},{
anchor: '100%',
xtype: 'container',
layout: 'column',
defaults: {
layout: 'form',
border: false,
labelAlign: 'right',
defaultType: 'textfield',
labelWidth: 35
},
items: [{
width: 778,
labelWidth: 55,
items: {
xtype: 'textarea',
name : 'observacao',
fieldLabel: 'Obs.',
width : 698,
height : 150,
maxLength : 300,
maxLengthText : 'Máximo 300 caracteres.'
}
}]
}]
});



this.membroForm = new Ext.form.FormPanel({
border: false, //Tiramos a borda azul
layout: 'fit',
labelWidth: 30,
//trackResetOnLoad: true,
items: [{
xtype: 'tabpanel',
id : 'tabPanelMembro',
border: false,
activeTab: 0,
items:[{
title: 'Geral',
iconCls:'no-icon',
layout: 'form',
heigth : 400,
labelWidth: 60,
bodyStyle : 'padding: 5px;',
items: [{
xtype: 'container',
layout: 'hbox',
border: false,
height: 130,
layoutConfig: {align: 'stretch'},
items: [this.formMembroLeft, this.panelFotoMembro]
}, this.formMembroBottom],
fbar:[{
text : '<b>Congregacional</b>',
iconCls: 'no-icon',
scope : this,
handler: this.goCongregacional
}]
},{
title: 'Congregacional',
iconCls:'no-icon',
layout: 'form',
heigth : 400,
labelWidth: 60,
bodyStyle : 'padding: 5px;',
items : this.membroCongregacional,
fbar:[{
text : 'Salvar',
iconCls: 'silk-save',
scope : this,
handler: this.salvarMembro
},{
text : 'Cancelar',
iconCls: 'silk-cancel',
scope : this,
handler: this.ocultarJanelaMembro
}]
},{
title : 'Histórico',
iconCls:'silk-historico-aluno',
layout : 'fit',
items: this.gridHistorico
}]
}]
});

fabiojpoli
12 Sep 2010, 7:17 AM
In settings that I added TabPanel


defaults : {hideMode:'offsets'},

http://www.extjs.com.br/forum/index.php?topic=4017.0