ExtJS加載本地json文件到樹面板

我想做一個樹，從JSON本地文件加載信息，代碼，我有樹加載父節點，但子節點不加載，是缺少的東西在我的代碼？ExtJS加載本地json文件到樹面板

型號：

Ext.define('modeloCapa', { 
    extend: 'Ext.data.Model', 
    fields: ['nombre', 'capas', 'capa'] 
});

商店：

var treeStore = Ext.create('Ext.data.TreeStore', { 
    model: 'modeloCapa', 
    proxy: { 
     type: 'ajax', 
     url: "jsontestq.json", 
     reader: { 
      type : 'json', 
      root : 'Result' 
     } 
    } 
});

樹面板：

Ext.create('Ext.tree.Panel', { 
    title: 'Prueba', 
    width: 500, 
    height: 550, 
    store: treeStore, 
    rootVisible: false, 
    renderTo: Ext.getBody(), 
    columns: [{ 
     xtype: 'treecolumn', 
     text: 'Col1', 
     flex: 2, 
     sortable: true, 
     dataIndex: 'nombre' 
    }] 
});

JSON文件：

{"Result":[{ 
 
"nombre":"Transporte Marítimo Fluvial ", 
 
"id":74, 
 
\t "capas":[{ 
 
\t \t "id":268, 
 
\t \t "capa":{ 
 
\t \t \t "id":268, 
 
\t \t \t "titulo":"puerto_p_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"puerto_p_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t }] 
 
},{ 
 
"nombre":"Entidades Territoriales y Unidades Admin ", 
 
"id":65, 
 
\t "capas":[{ 
 
\t \t "id":239, 
 
\t \t "capa":{ 
 
\t \t \t "id":239, 
 
\t \t \t "titulo":"limite_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"limite_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":319, 
 
\t \t "capa":{ 
 
\t \t \t "id":319, 
 
\t \t \t "titulo":"administrativo_p_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"administrativo_p_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t }] 
 
},{ 
 
"nombre":"Instalaciones Construcciones para el Transporte ", 
 
"id":67, 
 
\t "capas":[{ 
 
\t \t "id":269, 
 
\t \t "capa":{ 
 
\t \t "id":269, 
 
\t \t "titulo":"red_alta_tension_25k", 
 
\t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t "nombre":"red_alta_tension_25k", 
 
\t \t "metadato":"", 
 
\t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":260, 
 
\t \t "capa":{ 
 
\t \t \t "id":260, 
 
\t \t \t "titulo":"peaje_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"peaje_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":275, 
 
\t \t "capa":{ 
 
\t \t \t "id":275, 
 
\t \t \t "titulo":"torre_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"torre_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":266, 
 
\t \t "capa":{ 
 
\t \t "id":266, 
 
\t \t "titulo":"puente_l_25k", 
 
\t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t "nombre":"puente_l_25k", 
 
\t \t "metadato":"", 
 
\t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":267, 
 
\t \t "capa":{ 
 
\t \t \t "id":267, 
 
\t \t \t "titulo":"puente_p_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"puente_p_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":259, 
 
\t \t "capa":{ 
 
\t \t \t "id":259, 
 
\t \t \t "titulo":"paso_nivel_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"paso_nivel_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ \t 
 
\t \t "id":223, 
 
\t \t "capa":{ 
 
\t \t \t "id":223, 
 
\t \t \t "titulo":"antena_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"antena_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ \t 
 
\t \t "id":273, 
 
\t \t "capa":{ 
 
\t \t \t "id":273, 
 
\t \t \t "titulo":"terminal_p_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"terminal_p_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ \t 
 
\t \t "id":265, 
 
\t \t "capa":{ 
 
\t \t \t "id":265, 
 
\t \t \t "titulo":"poste_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"poste_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t },{ 
 
\t \t "id":276, 
 
\t \t "capa":{ 
 
\t \t \t "id":276, 
 
\t \t \t "titulo":"tuberia_25k", 
 
\t \t \t "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
 
\t \t \t "nombre":"tuberia_25k", 
 
\t \t \t "metadato":"", 
 
\t \t \t "wfs":false 
 
\t \t } 
 
\t }]}] 
 
}

謝謝你的建議。

來源

2015-05-26 davids182009

也許您的JSON文件不提供正確的屬性。子元素必須放置在「子」子數組中。看看這裏：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Panel。 – Tyr

謝謝，有什麼辦法可以用這個文件做樹？ – davids182009

看到我的回答下面 – Tyr

你有一點亂了你的樹的json數據。

我已經簡化您的JSON更好地理解：

{"Result":[ 
    { 
     "nombre":"Transporte Marítimo Fluvial ", 
     "id":74, 
     "Result":[ 
      { 
       "id":268, 
       "titulo":"puerto_p_25k", 
       "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
       "nombre":"puerto_p_25k", 
       "metadato":"", 
       "wfs":false 
      } 
     ] 
    }, 
    { 
     "nombre":"Entidades Territoriales y Unidades Admin ", 
     "id":65, 
     "Result":[ 
      { 
       "id":239, 
       "titulo":"limite_25k", 
       "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
       "nombre":"limite_25k", 
       "metadato":"", 
       "wfs":false 
      }, 
      { 
       "id":319, 
       "titulo":"administrativo_p_25k", 
       "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms", 
       "nombre":"administrativo_p_25k", 
       "metadato":"", 
       "wfs":false 
      } 
     ] 
    } 
]}

兩個層（根和孩子的）需要相同的結構。如果你的根屬性被稱爲「結果」，那麼子屬性也被稱爲「結果」。

這裏是一個煎茶撥弄工作的例子：https://fiddle.sencha.com/#fiddle/nhd

來源

2015-05-26 22:48:31 Tyr

謝謝，我多瞭解一點如何做到這一點。 – davids182009

無論如何你需要改變你的json文件。您可以使用標準格式讀者：

{ 
root: { 
    expanded: true, 
    children: [ 
     { model1_properties }, 
     { model2_properties, children: [ 
      {model2_1_properties}, 
      {model2_2_properties} 
     ] }, 
     { model3_properites } 
    ] 
}

另一種方式是改變讀者的屬性，使其工作（但無論如何你需要修復您的JSON）。請參閱文檔（http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.TreeStore）：

對於樹讀取嵌套數據，所述Ext.data.reader.Reader必須用root屬性進行配置，因此讀者可以找到每個節點嵌套數據（如果是沒有指定root，它將默認爲'children'）。這將告訴樹使用相同的關鍵字查找任何嵌套的樹節點，即'children'。如果在配置中指定了根目錄，請確保任何具有子項的嵌套節點具有相同的名稱。請注意，設置defaultRootProperty完成同樣的事情。

您可以設置defaultRootProperty到'capas'，但你仍然需要有內部'capas'陣列模式。

來源

2015-05-26 22:43:24

謝謝我重新組織我的json文件。 – davids182009

ExtJS加載本地json文件到樹面板

回答

相關問題