1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    213
    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
    Answers
    21
    Vote Rating
    12
    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
    213
    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
    Answers
    21
    Vote Rating
    12
    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
    213
    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
    126
    Answers
    2
    Vote Rating
    4
    badgerb1 is on a distinguished road

      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
    213
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi