2015-12-31 49 views
0

我有一個基於以下代碼樹格:ExtJS6的TreeGrid不顯示子節點

Ext.application({ 
    name : 'Fiddle', 
    launch : function() { 
     var treeData = [{ 
      mtype: 'InsDataModel', 
      recordid: '1', 
      companyname: 'Company 1', 
      children:[{   
       mtype: 'PlnDataModel', 
       recordid: '1A', 
       planname: 'Plan 1A' 
      },{ 
       mtype: 'PlnDataModel',     
       recordid: '1B', 
       planname: 'Plan 1B' 
      }] 
     },{ 
      mtype: 'InsDataModel',    
      recordid: '2', 
      companyname: 'Company 2', 
      children: [] 
     },{ 
      mtype: 'InsDataModel',    
      recordid: '3', 
      companyname: 'Company 3', 
      children:[{ 
       mtype: 'PlnDataModel',     
       recordid: '3A', 
       planname: 'Plan 3A' 
      },{ 
       mtype: 'PlnDataModel',     
       recordid: '3B', 
       planname: 'Plan 3B' 
      },{ 
       mtype: 'PlnDataModel',     
       recordid: '3C', 
       planname: 'Plan 3C' 
      },{ 
       mtype: 'PlnDataModel',     
       recordid: '3D', 
       planname: 'Plan 3D' 
      },{ 
       mtype: 'PlnDataModel',     
       recordid: '3E', 
       planname: 'Plan 3E'     
      }] 
     }]; 
     Ext.define('InsDataModel',{ 
      extend: 'Ext.data.TreeModel', 
      childType: 'PlnDataModel', 
      fields:[ 
       {name: 'recordid'}, 
       {name: 'text', mapping:'companyname'} 
      ]    
     }); 
     Ext.define('PlnDataModel',{ 
      extend: 'Ext.data.TreeModel', 
      fields:[ 
       {name: 'recordid'}, 
       {name: 'text', mapping:'planname'} 
      ] 
     }); 
     Ext.define('InsDataStore',{ 
      extend: 'Ext.data.TreeStore', 
      model: 'InsDataModel', 
      proxy:{     
       reader:{typeProperty: 'mtype'} 
      }, 
      data:treeData,    
     }); 
     Ext.define('InsDataGrid',{ 
      extend: 'Ext.tree.Panel', 
      store: { 
       model: 'InsDataModel', 
       proxy:{   
        type: 'memory', 
        reader:{typeProperty: 'mtype'} 
       }, 
       data:treeData 
      }, 
      title: 'My tree Demo', 
      renderTo: Ext.getBody(), 
      width: 400,    
      height: 600,    
      useArrows: true, 
      columns:[{ 
       text: 'Network', 
       dataIndex: 'text', 
       flex: 1 
      }] 
     });    
     var newTree = Ext.create('InsDataGrid').show(); 
    } 
}); 

這也位於:https://fiddle.sencha.com/#fiddle/136t

我遇到的問題是子節點不會父節點展開時顯示文本。有人可以看看代碼,讓我知道我做錯了什麼。謝謝。

+0

嘿米切爾,我的應用程序正在處理遠程數據。出於某種原因,我無法讓data1.json url在小提琴中工作,所以我決定讓數據在本地。問題仍然存在於我的遠程數據中。我認爲這也可以與遠程數據一起使用? – user1532602

回答

1

mapping作爲一個字符串需要閱讀器讀取遠程響應來構建映射的函數。此外,你應該刪除childTypeInsDataModel模型:https://fiddle.sencha.com/#fiddle/136u

+0

嘿米切爾。感謝您的迴應。幾件事情。數據應該是遠程的(我無法使用遠程數據正常工作,所以我使用本地數據)。該樹應該是異構的 - 我將更新兩個不同的模型。我知道我並沒有將這一點與我使用的數據明顯區分開來,但我試圖在這個例子中簡要介紹一下。 – user1532602

+0

@ user1532602我已經更新了我的小提琴以使用遠程加載的孩子,並保持你的異構模型。 https://fiddle.sencha.com/#fiddle/136u –

+0

謝謝,米切爾。總是一個巨大的幫助! – user1532602

相關問題