PDA

View Full Version : [SOLVED] rendering / converting a Numberfield?



avo
16 Sep 2009, 12:34 AM
Hey there,

is there any way to render / convert or render a numberfield?

If I enter a number like 10650 it should convert/render it to 10,650 (meters -> kilometers),
but the value in the db should be the first one (int).

Same goes for a numberfield with time: if I enter 95 (minutes) it should display 1:35, but the value in the db should be 95.

Any suggestions how to implement this?

Best regards,
avo ~o)

avo
16 Sep 2009, 10:56 PM
any ideas? :)

avo
18 Sep 2009, 7:02 AM
here are some pictures so its a bit more clear.

picture 1: (before render) value from db or user (in meter / minutes)
picture 2: (after render) value in kilometer / hours

hope you can help :)

Best regards,
avo~o)

avo
21 Sep 2009, 2:08 AM
bump :(

david l
21 Sep 2009, 1:15 PM
there are a few ways to go about it...

have 2 form fields, 1 to hold the value for the db (can be hidden) and the other to convert and display to the user which would allow you to convert the displayed one on the blur event and not effect the db value

convert it after submit (when you submit, value gets sent to db, then value is updated on an updated screen...although you run in to problems if you again have a submit button on this screen since it would now be sending the converted values)

convert on blur and on submit (converts it dynamically on the same page, but when you submit it it needs to convert back to a db field type....again, a problem will arise if you have the same submit button on this page if you were to reload the same page that contained the info)

mrsunshine
21 Sep 2009, 1:32 PM
Hey there,

is there any way to render / convert or render a numberfield?

If I enter a number like 10650 it should convert/render it to 10,650 (meters -> kilometers),
but the value in the db should be the first one (int).

i think the Ext.util.Format.number renderer fits your needs



Same goes for a numberfield with time: if I enter 95 (minutes) it should display 1:35, but the value in the db should be 95.


you can write your own render to get your needed behaviour . see examples at grid calumns renderer to give you an idea

avo
21 Sep 2009, 10:56 PM
ok, thanks guys i'll try that

avo
22 Sep 2009, 6:33 AM
Got it! Here's my code if you want to have a look at it:



Ext.ns('Ext.ux.form');

Ext.ux.form.NZTextField = Ext.extend(Ext.form.TextField,{
valueRenderer: null,
initComponent: function(config) {
Ext.ux.form.NZTextField.superclass.initComponent.apply(this, arguments);
this.on('blur', this.setHidden, this);
},
onRender: function(){
Ext.ux.form.NZTextField.superclass.onRender.apply(this, arguments);
this.hiddenEl = this.el.insertSibling({
tag: 'input', type: 'hidden', name: this.hiddenName
});
},

setHidden: function(v){
var regEx = new RegExp(/\s?[a-z]?/gi);
var myValue = Ext.ux.form.NZTextField.superclass.getValue.call(this);

if(myValue.match(/\s?h/gi)){
myValue = myValue.replace(regEx, '');
myValue = myValue*60;
}
else if(myValue.match(/\s?k/gi)){
myValue = myValue.replace(regEx, '');
myValue = myValue*1000;
}
else if(myValue.match(regEx)){
myValue = myValue.replace(regEx, '');
}

this.hiddenEl.dom.value = myValue;
},
setValue: function(v){
switch(this.valueRenderer){
case 'minutesToHours': v = this.m2h(v); break;
case 'metersToKilometers': v = this.m2km(v); break;
case 'metersToMeters': v = this.m2m(v); break;
default: break;
}
Ext.ux.form.NZTextField.superclass.setValue.apply(this, [v]);
},
getValue: function(){
return this.hiddenEl.dom.value;
},
getName: function() {
return this.hiddenName;
},

m2h: function(v){
v = (v / 60) + ' h';
return v;
},
m2km: function(v){
v = (v / 1000) + ' km';
return v;
},
m2m: function(v){
return v+' m';
}


});

Ext.reg('NZTextField', Ext.ux.form.NZTextField);


//Example:

defaultType: 'NZTextField',
items: [{
valueRenderer: 'minutesToHours',
fieldLabel: i18n._('tour_data_duration'),
maskRe: new RegExp('[0123456789.hm ]'),
hiddenName: 'duration'
},{
fieldLabel: i18n._('tour_data_length'),
valueRenderer: 'metersToKilometers',
maskRe: new RegExp('[0123456789.km ]'),
hiddenName: 'length'
}]
Thanks! :D~o)