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 не обеспечивает нужные свойства. Детальные элементы должны быть помещены в подмножество «children». Посмотрите здесь: 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 
      } 
     ] 
    } 
]}

Оба слоя (корень и Чайлдс) нуждается в той же структуре. Если ваше свойство root называется «Result», дочернее свойство также называется «Result».

Вот Сенч скрипка с рабочим например: 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 в панель дерева

ответ

Смежные вопросы