PDA

View Full Version : Help: form field values not displayed



SchattenMann
28 Aug 2009, 3:56 AM
hello

i'm having a real hard time to understand the following:

in some cases my form field values are not being displayed BUT they exist in the DOM.

for what i've seen it happens when:

1. setting value: XXX
2. fields are "2 Components" inside the form (ex. textfield inside a columnform (by Tine20) inside a fieldset)

in both cases DOM - field - value shows the desired value but its not rendered...

really appreciate some guidance to understand this

tks

jay@moduscreate.com
28 Aug 2009, 5:08 AM
hello

i'm having a real hard time to understand the following:

in some cases my form field values are not being displayed BUT they exist in the DOM.

for what i've seen it happens when:

1. setting value: XXX
2. fields are "2 Components" inside the form (ex. textfield inside a columnform (by Tine20) inside a fieldset)

in both cases DOM - field - value shows the desired value but its not rendered...

really appreciate some guidance to understand this

tks

This makes no sense to me. The text field is nothing more than a stylized input tag.
Can you provide a workable demo? Also, this sounds like a UX problem rather than an Ext JS specific one. You might want to contact the author

SchattenMann
28 Aug 2009, 5:18 AM
the fact that "makes no sense" is why i'm asking for help :P

ill try to post a workable demo ASAP

about the UX...i don't think so honestly since:

[code]
{
xtype:'textfield',
value: 'bla'
}
[code]

returns a empty textfield but in the DOM value = "bla"

jay@moduscreate.com
28 Aug 2009, 5:20 AM
does textfield == 'textfield' ??

SchattenMann
28 Aug 2009, 5:21 AM
sory...yes! i was in a hurry :P

SchattenMann
28 Aug 2009, 10:33 AM
could it be for the fieldset is collapsed and not expanded?

because if i put fieldset expanded values are show

SchattenMann
31 Aug 2009, 1:14 AM
hi

first of all sry for the delay but the weekend prevent me from getting the file...

here is the form i was talking about, only without the listeners to save space:




ERP.Processos.EditarProcesso = Ext.extend(Ext.form.FormPanel, {

// defaults - can be changed from outside
border:false
,frame:true
,labelWidth:80
,url:'php/processos.php'
,idProcesso:null

,constructor:function(config) {
config = config || {};
config.listeners = config.listeners || {};
/* Ext.applyIf(config.listeners, {
actioncomplete:function() {
if(console && console.log) {
console.log('actioncomplete:', arguments);
}
}
,actionfailed:function() {
if(console && console.log) {
console.log('actionfailed:', arguments);
}
}
}); */
ERP.Processos.EditarProcesso.superclass.constructor.call(this, config);
}

,initComponent:function() {

// hard coded - cannot be changed from outside
var config = {
defaultType:'icontextfield'
,defaults:{anchor:'0'}
,monitorValid:true
,autoScroll:true
,cls: 'myform'
,labelAlign: 'top'
,defaults: {
xtype:'icontextfield',
labelSeparator: ''
}
,items:[{
xtype:'hidden',
name:'uid'
},{
xtype:'columnform',
items:[
[
{
columnWidth:.5,
xtype:'uxspinner',
strategy:{
xtype:'number'
,minValue:0
,maxValue:99999
,incrementValue:1
,alternateIncrementValue:10
,allowDecimals: false
,decimalPrecision: 0
}
,name:'idProcesso'
//,fieldLabel:'Processo'
,hideLabel: true
,emptyText: 'ID'
,disabled:false
,width: 50
,allowBlank: false
},{
columnWidth:.5,
xtype:'ERPComboEstado',
hideLabel:'true',
disabled:true,
width:200,
name:'estado'
}
]
]
}

,{

xtype:'tabpanel',
activeItem:0,
border:false,
resizeTabs:true,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,

// this line is necessary for anchoring to work at
// lower level containers and for full height of tabs
anchor:'0 -35',

// only fields from an active tab are submitted
// if the following line is not persent
deferredRender:false,
activeTab:0,

// tabs
defaults:{
layout:'form',
labelWidth:80,
//defaultType:'icontextfield',
bodyStyle:'padding:5px',
autoScroll:true,
closable:false,
labelSeparator: '',

// as we use deferredRender:false we mustn't
// render tabs into display:none containers
hideMode:'offsets'
},
items:[
{
title:'Dados Gerais',
autoScroll:true,
items:[{
xtype:'myIdNameField',
hideLabel:false,
readOnly:true,
name:'idCliente',
fieldLabel:'Cliente',
//labelIcon: 'img/oxygen/16x16/devices/printer.png',
width: 120,
allowBlank:false,
clearHandler: function(){
this.setValue('');
var append = Ext.getCmp(this.append[0].id);
append.setValue('');
//var uid = this.ownerCt.find('name','uid')[0];
//uid.setValue(Ext.util.uid());
},
searchHandler: function(){
//console.debug('search');
var field = Ext.getCmp(this.id);
var fieldAppend = Ext.getCmp(field.append[0].id);
new ERP.widgets.PickerDialog({
TriggerField:this,
type:'cliente',
title:'Seleccione um cliente'
});
}
},{
xtype:'fieldset',//the fieldset's i was talking about
title:'Contactos',
collapsible: true,
collapsed: true,
listeners:{
'expand':function(){
console.debug(this)
this.render();
}
},
autoHeight: true,
items:[
{
xtype:'textfield',//test field - problem persists
name:'telefoneCliente',
fieldLabel:'bla'
},
{
xtype:'columnform',
items:[
[
{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'telefoneCliente2',
fieldLabel: 'Telefone',
loadingText: 'Loading...',
anchor:'100%'
},{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'telefoneCliente2',
fieldLabel: 'Telefone',
loadingText: 'Loading...',
anchor:'100%'
},{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'faxCliente',
fieldLabel: 'Fax',
loadingText: 'Loading...',
anchor:'100%'
},{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'emailCliente',
fieldLabel: 'Email',
vtype: 'email',
loadingText: 'Loading...',
anchor:'100%'
}
]
]
}
]
},{
xtype:'myIdNameField',
hideLabel:false,
readOnly:true,
name:'idContacto',
fieldLabel:'Contacto',
//labelIcon: 'img/oxygen/16x16/devices/printer.png',
width: 120,
allowBlank:false,
clearHandler: function(){
this.setValue('');
var append = Ext.getCmp(this.append[0].id);
append.setValue('');
//var uid = this.ownerCt.find('name','uid')[0];
//uid.setValue(Ext.util.uid());
},
searchHandler: function(){
//console.debug('search');
var idCliente = this.ownerCt.find('name','idCliente')[0];
var field = Ext.getCmp(this.id);
var fieldAppend = Ext.getCmp(field.append[0].id);
new ERP.widgets.PickerDialog({
idFilter:idCliente.getValue(),
TriggerField:this,
type:'contacto',
title:'Seleccione um contacto'
});
}
},{
xtype:'fieldset',
title:'Contactos',
collapsible: true,
collapsed: true,
autoHeight: true,
items:[
{
xtype:'columnform',
items:[
[
{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'telefoneContacto',
fieldLabel: 'Telefone',
loadingText: 'Loading...',
anchor:'100%'
},{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'telefoneContacto2',
fieldLabel: 'Telefone',
loadingText: 'Loading...',
anchor:'100%'
},{
columnWidth:.25,
disabled:true,
xtype:'icontextfield',
name: 'emailContacto',
fieldLabel: 'Email',
vtype: 'email',
loadingText: 'Loading...',
anchor:'100%'
}
]
]
}
]
},{
xtype:'columnform',
layout:'form',
items:[
[
{
columnWidth:.333,
xtype:'ERPComboTecnico',
fieldLabel: 'Recebido',
hiddenName: 'recebido_por'
},{
columnWidth:.333,
xtype:'ERPComboDepartamento'
},{
columnWidth:.333,
xtype:'ERPComboPrioridade'
}
],[
{
columnWidth:.333,
xtype:'ERPComboTecnico',
fieldLabel: 'Responsável',
hiddenName: 'tec_responsavel'
},{
columnWidth:.333,
xtype:'ERPComboOrigem'
},{
columnWidth:.333,
xtype: 'clearabledatefield',
fieldLabel: 'Data Prevista',
name: 'data_prevista',
disabledDays: [0,6],
format:'d-m-Y',
value: new Date().format('d-m-Y'),
allowBlank: false
}
],[
{
columnWidth:.5,
height:280,
anchor:'0',
xtype: 'htmleditor',
name:'material',
fieldLabel:'Material'
},{
columnWidth:.5,
height:280,
anchor:'0',
xtype: 'htmleditor',
name:'descricao',
fieldLabel:'Descrição'
}
]
]
}]
},{
title:'Intervenções',
autoScroll:true,
items:[
{
xtype:'GridIntervencoes',
name:'gridIntervencoes',
preventAutoLoad: true,
filterType:'gridIntervencoes',
buttons:[
{
xtype:'button',
text:'Nova Intervenção',
iconCls:'icon-plus',
scope:this,
handler:function() {
//console.debug(this)
//console.debug(this.getForm().findField('idProcesso'))
new Ext.util.addWindow({
title:'Nova Intervenção',
modal:true,
items:[
{
xtype:'ERPFormIntervencoes',
idProcesso:this.getForm().findField('idProcesso').getValue()
}
]
});
}
}
]
}
]
},{
title:'Artigos',
autoScroll:true,
items:[
{
xtype:'GridArtigos',
preventAutoLoad: true,
name:'gridArtigos'
}
]
},{
title:'Dados Comerciais',
autoScroll:true,
buttons:[
{
xtype:'button',
text: 'Editar',
tooltip:'Editar os valores comerciais.',
iconCls:'icon-server-go',
handler: function(){}
},{
xtype:'button',
text: 'Exportar',
tooltip:'Exportar para documento no Primavera',
iconCls:'icon-server-go',
handler: function(){}
},{
xtype:'button',
text: 'Procurar',
iconCls:'icon-zoom',
tooltip:'Procurar documentos de Venda no Primavera',
handler: function(){}
}
],
items:[
{
xtype: 'icontextfield',
helpText: 'Valor calculado pelo sistema para as Intervenções.',
helpIcon: 'icon-info ',
helpTitle: '',
helpDisplay: 'both',
helpTarget: 'field',
name: 'valor_serv',
fieldLabel: 'Valor Serviços(€)',
readOnly : true,
disabled:true
},{
xtype: 'icontextfield',
helpText: 'Valor calculado pelo sistema para os Artigos.',
helpIcon: 'icon-info ',
helpTitle: '',
helpDisplay: 'both',
helpTarget: 'field',
name: 'valor_art',
fieldLabel: 'Valor Artigos(€)',
readOnly : true,
disabled:true
},{
xtype: 'icontextfield',
helpText: 'Valor <b>total</b> calculado pelo sistema.',
helpIcon: 'icon-info ',
helpTitle: '',
helpDisplay: 'both',
helpTarget: 'field',
name: 'valor_real',
fieldLabel: 'Valor Total(€)',
readOnly : true,
disabled:true
},{
xtype: 'icontextfield',
helpText: 'Este valor sobrepõe ao calculado pelo sistema.',
helpIcon: 'icon-info ',
helpTitle: 'Atenção!',
helpDisplay: 'both',
helpTarget: 'field',
name: 'valor_orc',
fieldLabel: 'Valor Orçamentado(€)',
readOnly : true,
disabled:true
},{
xtype: 'icontextfield',
helpText: 'Valor a ser facturado. <b>Sobrepõe a todos os outros!</b>',
helpIcon: 'icon-info ',
helpTitle: 'Atenção!',
helpDisplay: 'both',
helpTarget: 'field',
name: 'valor_imput',
fieldLabel: 'Valor Imputar(€)',
readOnly : true,
disabled:true
},{
xtype: 'box',
autoEl: 'div',
height: 10
},{
xtype:'panel',
autoWidth:true,
html:'Os Valores Apresentados <b>Não</b> Incluem IVA <br><br>'
},{
xtype: 'textfield',
helpText: 'Valores no Primavera. <b>Atenção!</b>',
helpIcon: 'icon-info ',
helpTitle: 'Atenção!',
helpDisplay: 'both',
helpTarget: 'field',
name: 'doc_primav',
fieldLabel: 'Documento',
readOnly : true,
disabled:true
},{
xtype: 'textfield',
helpText: 'Valores no Primavera. <b>Atenção!</b>',
helpIcon: 'icon-info ',
helpTitle: 'Atenção!',
helpDisplay: 'both',
helpTarget: 'field',
name: 'num_doc_primav',
fieldLabel: 'Num.',
readOnly : true,
disabled:true
},{
xtype: 'textfield',
helpText: 'Valores no Primavera. <b>Atenção!</b>',
helpIcon: 'icon-info ',
helpTitle: 'Atenção!',
helpDisplay: 'both',
helpTarget: 'field',
name: 'serie_doc_primav',
fieldLabel: 'Serie.',
readOnly : true,
disabled:true
},{
xtype: 'textfield',
helpText: 'Valores no Primavera. <b>Atenção!</b>',
helpIcon: 'icon-info ',
helpTitle: 'Atenção!',
helpDisplay: 'both',
helpTarget: 'field',
name: 'cliente_doc_primav',
fieldLabel: 'Cliente.',
readOnly : true,
disabled:true
}
]
}
]

}

]
,buttons:[{
text:'Guardar'
,formBind:true
,scope:this
,handler:this.submit
},{
text:'Novo'
,formBind:false
,scope:this
,handler:this.reset
}]
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
ERP.Processos.EditarProcesso.superclass.initComponent.apply(this, arguments);

} // eo function initComponent

/**
* Form afterRender override
*/
,onRender:function() {

// call parent
ERP.Processos.EditarProcesso.superclass.onRender.apply(this, arguments);

var idProcesso = this.find('name','idProcesso')[0];
var allTabs = this.findByType('tabpanel');

if(idProcesso.getValue() == '' || idProcesso.getValue() == undefined){
for (var i = 0, len = allTabs.length; i < len; i++) {
var tab = allTabs[i];
if(tab.disabled == false){
tab.disable();
}
}
};

// set wait message target
//this.getForm().waitMsgTarget = this.getEl();

// loads form after initial layout
// this.on('afterlayout', this.onLoadClick, this, {single:true});
this.on('afterlayout', this.initValues, this, {single:true});

} // eo function onRender

/**
* Load button click handler
*/
,onLoadClick:function() {} // eo function onLoadClick

/**
* Submits the form. Called after Submit buttons is clicked
* @private
*/
,submit:function() {
this.getForm().submit({
url:this.url
,scope:this
,success:this.onSuccess
,failure:this.onFailure
,params:{cmd:'saveForm'}
,waitMsg:'Saving...'
});
} // eo function submit

,reset:function() {} // eo function submit

/**
* Success handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onSuccess:function(form, action) {
Ext.Msg.show({
title:'Success'
,msg:'Form submitted successfully'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
ERP.util.storeReload("gridProcessos");
} // eo function onSuccess

,onSuccessLoad:function(form, action) {} // eo function onSuccess

/**
* Failure handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onFailure:function(form, action) {
this.showError(action.result.error || action.response.responseText);
} // eo function onFailure

/**
* Shows Message Box with error
* @param {String} msg Message to show
* @param {String} title Optional. Title for message box (defaults to Error)
* @private
*/
,showError:function(msg, title) {
title = title || 'Error';
Ext.Msg.show({
title:title
,msg:msg
,modal:true
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
});
} // eo function showError

}); // eo extend

// register xtype
Ext.reg('ERPFormEditarProcesso', ERP.Processos.EditarProcesso);

so in this example all phones are not showing up...

in this specific example i think its because the fields inside fieldset are only being rendered when fieldset is expanded...but how can i prevent this?

i mean is there something like deferedRender in tabs?

tks for your assistance...

SchattenMann
31 Aug 2009, 3:06 AM
i think i found the glitch...

a damm plugin that overrides the afterrender function on Ext.Form.Field and don't include the this.initValues()...

bah!

to prevent this situations are any way to include the existent code and add some more on the end?

like:



Ext.override(Ext.form.Field, {
afterRender: function(){

//include the existante code

//add my code

Ext.form.Field.superclass.afterRender.call(this);

}

});


tks ;)