ExtJs实践：支持“复杂”Json的JsonReader
从服务端返回如下的JSON：
{Id:2,Name:'Child1',Parent:{Id:1,Name:'Parent'}}
定义了如下的JsonReader来准备显示角色列表，父角色的名称影射成ParentName：
var myReader = new Ext.data.JsonReader({ idProperty: 'id' root: 'rows', totalProperty: 'results', fields: [ {name: 'Id'}, {name: 'Name'}, {name: 'ParentName', mapping: 'Parent.Name'} ] });
当服务端传回来的JSON包含Parent，就如上面的JSON一样，这个reader能正常工作，但是当返回的JSON中不包含Parent或者Parent为null的时候，列表就不能正常显示了：
{Id:2,Name:'Child1',Parent:null}
大家可能已经猜到mapping:’Parent.Name’也许出了问题，对，Parent为null，怎么能访问Name属性呢，这个时候ParentName也应该是null。但是JsonReader并没有考虑到这种情况，查看了JsonReader的源代码，发现了下面这个方法：
getJsonAccessor: function(){ var re = /[\[\.]/; return function(expr) { try { return(re.test(expr)) ? new Function("obj", "return obj." + expr) : function(obj){ return obj[expr]; }; } catch(e){} return Ext.emptyFn; }; }(),
获取Json访问器方法，JsonReader会通过这个方法的根据fields设定获取一系列的如下的function:
function(obj){ return obj.Id; } function(obj){ return obj.Name; } function(obj){ return obj.Parent.Name; }
大家看到问题了吧，就在obj.Parent.Name上，当Parent为null或者根本不存在的时候，程序到这里就终止了。要解决这个问题，我们就要修改这个获取Json访问器的方法，使它能返回如下的function:
function(obj){ try{ return obj.Parent.Name; } catch(e){} return undefined; }
当然我们不能去修改ExtJs的源程序，使用继承来覆盖原来的getJsonAccessor：
ComplexJsonReader = Ext.extend(Ext.data.JsonReader, {
getJsonAccessor: function() {
var re = /[\[\.]/;
return function(expr) {
try {
return (re.test(expr)) ?
new Function("obj", "try { return obj." + expr + ";}catch(e){}return undefined;") :
function(obj) {
return obj[expr];
};
} catch (e) { }
return Ext.emptyFn;
};
} ()
});
但是，如果你的GridPanel使用的是JsonStore的话，那么将不能享受ComplexJsonReader，因为JsonStore是一个顽固分子，它在内部限定了reader只能是JsonReader:
Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
/**
* @cfg {Ext.data.DataReader} reader @hide
*/
constructor: function(config){
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});
Ext.reg('jsonstore', Ext.data.JsonStore);
所以你只能再派生一个ComplexJsonStore出来，但是不能从JsonStore继承，因为它很顽固，除了通过配置来设定reader之外，没有提供方法来设定，所以你想在它的构造函数调用之后再来替换掉reader，没有门，所以只能从Store继承：
ComplexJsonStore = Ext.extend(Ext.data.Store, {
constructor: function(config) {
ComplexStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new ComplexJsonReader(config)
}));
}
});
嗯，ComplexJsonStore也很顽固，当然你也可以改变一下，让它不那么顽固 :)。
“复杂”Json？谁有更好的叫法？