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.