ExtJs : Why numberfield automatically converts null to 0 while displaying data - extjs

Question

I have an Extjs form wherein we can assign age for a person. So when I assign blank in Age field and save it to DB that works good (in DB age goes as blank). But when I try to refresh and display it again then it displays 0.
I tried with allowBlank:true but it doesn't work.
This also doesn't work :
https://www.sencha.com/forum/showthread.php?181270-Hi-how-can-i-set-null-for-a-numberfield
Form :
Ext.define('com.view.xxxx.entities.forms.yyyyyyy', {
statics: {
buildItems: function ()
{
return [
{
xtype: 'fieldset',
title: 'Person',
defaultType: 'textfield',
defaults: { anchor: '100%'},
items: [
{fieldLabel: 'Age', name: 'age', xtype: 'numberfield', labelWidth: 130}
]
}
]
}
}
});
How can we force number field to display data from DB as is i.e. blank as blank?

Answer 1

My suggestion is to use a Model that converts any non-numeric value to a empty string and use this model in your form:
Ext.define('Fiddle.model.ageModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [{
name: 'name'
}, {
name: 'age',
convert: function (v, rec) {
return typeof (v) === 'number' ? v : '';
},
}]
});
See this exemple

Answer 2

I prefer to use Number field in model with allowNull variable.
And allowBlank must be true in numberfield.
Ex.
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{ name: 'age', type: 'number', allowNull: true }
]
});

Answer 3

I was running into this, and changing my code to use the allowNull option seemed to fix my issue (for Ext-js 6). What isn't documented well is that when you define a field as type 'null', without the convert function or the allowNull option set to true, the store treats the value as '0' if it is actually null since 'null' is not a valid 'number'. It took me a while to figure that out on my own.
If running an older version though and allowNull doesn't work, you may be able to resolve it by additionally specifying a convert function that checks for null and returns null. Yes, it's a kludge, but it seemed to work for me before I tried using allowNull. Also works for v6 if you don't specify allowNull at all, like this:
{ name: 'age', type: 'number', convert:
function (v, rec) {
return (v === null ? null : v);
}
}
I had originally changed my app to use the convert function and had it working, but switched to using allowNull after finding this post since that's cleaner/clearer, but the convert function option was one I found on an old Sencha forum post.