1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    219
    Vote Rating
    1
    abraxxa is on a distinguished road

      0  

    Default Unanswered: JSON null handling for XTemplate views

    Unanswered: JSON null handling for XTemplate views


    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.

  2. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    Answers
    21
    mrsunshine will become famous soon enough

      0  

    Default


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

    example of field definition in a model class

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

  3. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    219
    Vote Rating
    1
    abraxxa is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    691
    Vote Rating
    12
    Answers
    21
    mrsunshine will become famous soon enough

      0  

    Default


    you also can do it in the xtemplate
    HTML Code:
    new Ext.XTemplate('<div>{[values.title === null ? "" : values.title]}</div>')

  5. #5
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    219
    Vote Rating
    1
    abraxxa is on a distinguished road

      0  

    Default


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

    Code:
    Ext.apply(Ext.util.Format, {
                null: function(value) {
                    return value !== undefined && value != null ? value : '';
                }
    });
    which I can use like:

    HTML Code:
    <div>{title:null}</div>
    I was hoping to find a solution that does this for every template variable automatically.

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    128
    Vote Rating
    16
    Answers
    2
    badgerb1 will become famous soon enough

      0  

    Default


    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});

    Code:
    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 + ')';
                }
    });

  7. #7
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    219
    Vote Rating
    1
    abraxxa is on a distinguished road

      0  

    Default


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

Thread Participants: 2

Tags for this Thread