PDA

View Full Version : Extended textfield not work with deferredRender Tabpanel property on form load



caiocosta
23 Nov 2010, 11:35 AM
Hi...

I've problem with custom field (Money from Brazil) that extend a TextField. Everything works fine, but when i use Form.getForm(), if a custom component was in a tab that not clicked yet, an error occurs (this.el is undefined). I already set deferredRender: false and layoutOnTabChange: true in a tabPanel component. Note that this problem occurs only a custom component, all the others fields (NumberField, DateField, etc) works fine.

Custom field code:



Ext.ux.moneyField = Ext.extend(Ext.form.TextField, {

priceUnit:'R$',

posUnit: 'left',

priceDelemiter:' ',

enableRenderer:true,

customRenderer:undefined,

style: 'text-align:right',

initComponent : function(){
Ext.ux.moneyField.superclass.initComponent.call(this);
if (this.priceDelemiter!=',' && this.priceDelemiter!=' ') this.priceDelemiter=' '
},

renderValue :function(action,disable) {//bypass enableRendering verification when desabling rendering
if (this.enableRenderer || disable) {
if (this.customRenderer===undefined){
this.RenderMoney(action) //if customRenderer is undefined call default renderer
} else {
this.customRenderer.call(this,action)
}
}
},

RenderMoney :function(action) {
if (!action & !this.el.dom.readOnly) {
//action = false - somente elimina os caracteres alphanumericos, mas mantem a formatação da moeda corrente
this.el.dom.value=this.el.dom.value.replace(/[^0-9,.]+/g,'');
} else {
//action = true - obtem o valor float e converte para money
value=this.el.dom.value.replace(/[^0-9,.]+/g,'');//replace all alphabetic ans special characters except ','
this.el.dom.value=SetMoney(value,this.priceUnit, this.posUnit)//render in money format
}
},

onFocus : function(){
Ext.ux.moneyField.superclass.onFocus.call(this);
this.renderValue(false);
},

onBlur : function(){
value = this.el.dom.value.replace(/[^0-9,]+/g,'').replace(',','.');
this.el.dom.value = SetMoney(value,this.priceUnit, this.posUnit)//render in money format
if(this.fn){
eval(this.fn+'(this)');
}
},

setValue : function(v){
Ext.ux.moneyField.superclass.setValue.call(this,v);
this.renderValue(true)
},

getValue : function(){
//Retorna valor em Float
return this.el.dom.value.replace(/[^0-9,]+/g,'').replace(',','.');
},

getRawValue : function(){
//Retorna valor como visualizado no campo
return this.el.getValue();

},



});
Ext.reg('moneyfield',Ext.ux.moneyField)



function SetMoney (value, unit, unitPosition){

//Formatando o valor float em Moeda
if(value == ''){
return '';
}
value = Ext.util.Format.number(value,'0.000,00/i');

unit=(undefined===unit) ? ("") : (unit);
unit=(unit.replace(/^\s+|\s+$/g,"").length == 0)?"":unit+" ";

if(unitPosition == 'right'){
return value+unit;
}
return unit+value;
}


The code that call a Form.getForm() is very big, so i think that is not need in this case....

Anybory could help me ?

thanks,
Caio.

plalx
23 Nov 2010, 2:09 PM
Well... if you are calling any methods on your component that makes use of this.el without checking if this.el exists and that it has been rendered, you will get an error. For example, in your case, calling getValue on your component will throw an error if your component is not rendered in the DOM.

Check how they do in the Ext.form.Field.setValue (http://dev.sencha.com/deploy/dev/docs/source/Field.html#method-Ext.form.Field-setValue) implementation, it will help you to redesign your methods so that you can use them even if your component is not rendered yet.

caiocosta
24 Nov 2010, 3:21 AM
Works fine!!! thanks a lot....