Ext.ux.data.reader.SafeJson - безопасный JSON

Иногда исходные данные для хранилища данных Ext.data.Store могут не соответствовать в точности модели данных Ext.data.Model, что приводит к невозможности их отображения в дальнейшем.

Например, если у нас есть такие исходные данные в формате JSON, то проблем со стороны Extjs нет:

[
    {id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
    {id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
    {id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
    {id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},
]

[

{id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},

{id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},

{id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},

{id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},

]

т.к. все данные соответствуют описанной модели:

Ext.define("Model", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name.name"},
        {name: "phone", mapping: "name.phone"},
        {name: "descr", type: "string", mapping:'description'}
    ]
});

Ext.define("Model", {

extend: "Ext.data.Model",

fields: [

{name: "id", type: "int"},

{name: "name.name"},

{name: "phone", mapping: "name.phone"},

{name: "descr", type: "string", mapping:'description'}

]

});

Но как только, хотябы в одной из записей отсутствует поле учавствующее в маппинге (карта соответствий между данными и полями), то все данные игнорируются:

[
    {id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
    {id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
    {id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
    {id: 4, description:"Ololo"},
]

[

{id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},

{id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},

{id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},

{id: 4, description:"Ololo"},

]

Что хорошо видно на примере.

Загружаются: http://jsfiddle.net/elganz/3hwp3/5/

Не загружаются: http://jsfiddle.net/elganz/3hwp3/6/

Решение

Для решения таких проблем можно использовать улучшенный обработчик данных в формате Json. Для его применения достаточно просто в proxy хранилища заменить тип reader c json на safejson.

Ext.define('Ext.ux.data.reader.SafeJson', {
    extend: 'Ext.data.reader.Json',
    alias : 'reader.safejson',
    /**
     * @private
     * Returns an accessor function for the given property string. Gives support for properties such as the following:
     * 'someProperty'
     * 'some.property'
     * 'some["property"]'
     * This is used by buildExtractors to create optimized extractor functions when casting raw data into model instances.
     */
    createAccessor: (function() {
        var re = /[\[\.]/;

        return function(expr) {
            if (Ext.isEmpty(expr)) {
                return Ext.emptyFn;
            }
            if (Ext.isFunction(expr)) {
                return expr;
            }
            if (this.useSimpleAccessors !== true) {
                var i = String(expr).search(re);
                if (i >= 0) {
                    if (i > 0) {    // Check all property chain for existence. Return null if any level does not exist.
                        var a = [];
                        var l = expr.split('.');
                        var r = '';
                        for (var w in l) {
                            r = r + '.' + l[w];
                            a.push('obj' + r);
                        }
                        var v = "(" + a.join(" && ") + ") ? obj." + expr + " : null";
                        return Ext.functionFactory('obj', 'return (' + v + ')');
                    } else {
                        return Ext.functionFactory('obj', 'return obj' + (i > 0 ? '.' : '') + expr);
                    }
                }
            }
            return function(obj) {
                return obj[expr];
            };
        };
    }()),

        /**
     * @private
     * @method
     * Returns an accessor expression for the passed Field. Gives support for properties such as the following:
     *
     * - 'someProperty'
     * - 'some.property'
     * - 'some["property"]'
     *
     * This is used by buildExtractors to create optimized on extractor function which converts raw data into model instances.
     */
    createFieldAccessExpression: (function() {
        var re = /[\[\.]/;

        return function(field, fieldVarName, dataName) {
            var me     = this,
                hasMap = (field.mapping !== null),
                map    = hasMap ? field.mapping : field.name,
                result,
                operatorSearch;

            if (typeof map === 'function') {
                result = fieldVarName + '.mapping(' + dataName + ', this)';
            } else if (this.useSimpleAccessors === true || ((operatorSearch = String(map).search(re)) < 0)) {
                if (!hasMap || isNaN(map)) {
                    // If we don't provide a mapping, we may have a field name that is numeric
                    map = '"' + map + '"';
                }
                result = dataName + "[" + map + "]";
            } else {                
                if (operatorSearch > 0) {
                    var a = [];
                    var l = map.split('.');
                    var r = '';
                    for (var w in l) {
                        r = r + '.' + l[w];
                        a.push(dataName + r);
                    }
                    result = "("+a.join(" && ")+") ? "+dataName+"."+map+" : null";
                } else {
                    result = dataName + map;
                }
            }            
            return result;
        };
    }())
});

Ext.define('Ext.ux.data.reader.SafeJson', {

extend: 'Ext.data.reader.Json',

alias : 'reader.safejson',

/**

* @private

* Returns an accessor function for the given property string. Gives support for properties such as the following:

* 'someProperty'

* 'some.property'

* 'some["property"]'

* This is used by buildExtractors to create optimized extractor functions when casting raw data into model instances.

createAccessor: (function() {

var re = /[\[\.]/;

return function(expr) {

if (Ext.isEmpty(expr)) {

return Ext.emptyFn;

}

if (Ext.isFunction(expr)) {

return expr;

}

if (this.useSimpleAccessors !== true) {

var i = String(expr).search(re);

if (i >= 0) {

if (i > 0) { // Check all property chain for existence. Return null if any level does not exist.

var a = [];

var l = expr.split('.');

var r = '';

for (var w in l) {

r = r + '.' + l[w];

a.push('obj' + r);

}

var v = "(" + a.join(" && ") + ") ? obj." + expr + " : null";

return Ext.functionFactory('obj', 'return (' + v + ')');

} else {

return Ext.functionFactory('obj', 'return obj' + (i > 0 ? '.' : '') + expr);

}

return function(obj) {

return obj[expr];

};

}()),

/**

* @private

* @method

* Returns an accessor expression for the passed Field. Gives support for properties such as the following:

* - 'someProperty'

* - 'some.property'

* - 'some["property"]'

* This is used by buildExtractors to create optimized on extractor function which converts raw data into model instances.

createFieldAccessExpression: (function() {

var re = /[\[\.]/;

return function(field, fieldVarName, dataName) {

var me = this,

hasMap = (field.mapping !== null),

map = hasMap ? field.mapping : field.name,

result,

operatorSearch;

if (typeof map === 'function') {

result = fieldVarName + '.mapping(' + dataName + ', this)';

} else if (this.useSimpleAccessors === true || ((operatorSearch = String(map).search(re)) < 0)) {

if (!hasMap || isNaN(map)) {

// If we don't provide a mapping, we may have a field name that is numeric

map = '"' + map + '"';

}

result = dataName + "[" + map + "]";

} else {

if (operatorSearch > 0) {

var a = [];

var l = map.split('.');

var r = '';

for (var w in l) {

r = r + '.' + l[w];

a.push(dataName + r);

}

result = "("+a.join(" && ")+") ? "+dataName+"."+map+" : null";

} else {

result = dataName + map;

}

return result;

};

}())

});

Описание решения на stackoverflow: http://stackoverflow.com/questions/11460270/how-to-ignore-null-fields-in-extjs-data-models/12897991#12897991

Работающий пример: http://jsfiddle.net/elganz/3hwp3/7/

Раcширенный пример: http://jsfiddle.net/elganz/HJGPt/

Ext.ux.data.reader.SafeJson — безопасный JSON

Решение

Поделится статьей!