JSON null handling for XTemplate views

[abraxxa]

I've tried to find out how to handle null values coming from a store using a Ext.data.reader.Json in an XTemplate.
Firefox displays null instead of an empty string and I was wondering if I need to convert JSON null to Javascript undefined somewhere in the store/proxy/reader or have a formatting function for every single template field that might be null.

[mrsunshine]

you can define a convert function in your model to handle null values

example of field definition in a model class



fields: [
{
name: 'title',
type: 'string',
convert: function(value) {
return (value === null) ? '' : value;
}
}]

[abraxxa]

Thanks for your suggestion!
That would make it impossible to later know the difference between null and an empty string.

[mrsunshine]

you also can do it in the xtemplate

new Ext.XTemplate('<div>{[values.title === null ? "" : values.title]}</div>')

[abraxxa]

I've added a function named 'null' to Ext.util.Format:



Ext.apply(Ext.util.Format, {
null: function(value) {
return value !== undefined && value != null ? value : '';
}
});


which I can use like:



<div>{title:null}</div>


I was hoping to find a solution that does this for every template variable automatically.

[badgerb1]

Here's a pair of overrides that will allow you to set a blankNulls config on an xtemplate. It will show all nulls and undefined as blank.

To use add blankNulls:true to your xtemplate config just like disableFormats is used.

new XTemplate("<div>{field}</div>", {blankNulls:true});


Ext.define("Ext.ux.util.template.BlankNulls", {
override:'Ext.XTemplate',

applyOut: function(values, out) {
var me = this,
compiler;


if (!me.fn) {
compiler = new Ext.XTemplateCompiler({
useFormat: me.disableFormats !== true,
blankNulls: me.blankNulls
});
me.fn = compiler.compile(me.html);
}


try {
me.fn.call(me, out, values, {}, 1, 1);
} catch (e) {
//<debug>
Ext.Logger.error(e.message);
//</debug>
}


return out;
}
}
);


Ext.define("Ext.ux.util.template.XTemplateCompilerNullBlanks", {
override:'Ext.XTemplateCompiler',

parseTag: function (tag) {//override to blankNulls if the config is set.


var m = this.tagRe.exec(tag),
name = m[1],
format = m[2],
args = m[3],
math = m[4],
v;


// name = "." - Just use the values object.
if (name == '.') {
// filter to not include arrays/objects/nulls
v = 'Ext.Array.indexOf(["string", "number", "boolean"], typeof values) > -1 || Ext.isDate(values) ? values : ""';
}
// name = "#" - Use the xindex
else if (name == '#') {
v = 'xindex';
}
else if (name.substr(0, 7) == "parent.") {
v = name;
}
// name has a . in it - Use object literal notation, starting from values
else if ((name.indexOf('.') !== -1) && (name.indexOf('-') === -1)) {


v = "values." + name;
}
// name is a property of values
else {
v = "values['" + name + "']";
}


if (math) {
v = '(' + v + math + ')';
}


if (format && this.useFormat) {
args = args ? ',' + args : "";
if (format.substr(0, 5) != "this.") {
format = "fm." + format + '(';
} else {
format += '(';
}
} else {
args = '';
if (this.blankNulls){
format = "(" + v + " === undefined || " + v + " === null ? '' : ";
}else {


format = "(" + v + " === undefined ? '' : ";


}
}


return format + v + args + ')';
}
});

[abraxxa]

Thanks, will try that as soon as time permits!
Having it on github would be great to easily fix bugs in the future.