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？谁有更好的叫法？