從服務端返回如下的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？誰有更好的叫法？