How to create tree panel in Extjs with son json data

I want to generate a tree panel, when I define the TreeStore I get the following error: 'Cannot read property 'isModel' of undefined. Here is some fragment of my code:

Ext.define('App.view.AreaActivosTree', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.AreaActivosTree',
  requires: ['Ext.toolbar.Toolbar', 'Ext.data.*', 'Ext.grid.*', 'Ext.tree.*',    'Ext.tip.*'],

initComponent: function() {

var store = Ext.create('Ext.data.TreeStore', {
fields: ['text'],
proxy:{
  type: 'ajax',
  url: 'principal/app/tree_areas_versat/',
  reader: {
    type: 'json',
    root: 'root',
         }
 },
autoLoad:true,

});

Ext.apply(this, {
items: [{
   xtype: 'treepanel',
   rootVisible: false,
   store: store,
   }],

});

this.callParent(arguments);
},

});

json que devuelve url: {"total": 73, "root": {"expanded": true, "children":      [{"text": "AREA   VICEPRESIDENCIA COMERCIAL", "expanded": true, "children": [{"text": "DIRECCI\u00d3N COMERCIAL LOGISTICA DE ALMACEN", "leaf": true}, {"text": "DIRECCI\u00d3N COMERCIAL MARKETING Y VENTAS", "leaf": true}, {"text": "DIRECCI\u00d3N COMERCIAL NUEVOS NEGOCIOS", "leaf": true}, {"text": "DIRECCI\u00d3N COMERCIAL TRANSPORTE Y SEGURO", "leaf": true}, {"text": "VICEPRESIDENCIA COMERCIAL", "leaf": true}, {"text": "OFICINA SECRETARIA VICE PRESIDENCIA COMERCIAL", "leaf": true}]}, {"text": "AREA DIRECCION DE INSPECCION DEL TRANSPORTE", "expanded": true, "children": [{"text": "DIRECCION DE INSPECCION DEL TRANSPORTE", "leaf": true}, {"text": "GPS", "leaf": true}]}, {"text": "AREA VICEPRESIDENCIA LOGISTICA", "expanded": true, "children": [{"text": "VICEPRESIDENCIA LOGISTICA", "leaf": true}, {"text": "DIRECCI\u00d3N DE GESTI\u00d3N DE LOS RECURSO E INVENTARIOS", "leaf": true}, {"text": "GRUPO ADMINISTRACI\u00d3N", "leaf": true}]}, {"text": "TRANSPORTE", "expanded": true, "children": [{"text": "DIRECCION", "leaf": true}]}, {"text": "DIRECCION JURIDICA AFT", "expanded": true, "children": [{"text": "OFICINA DIRECCION", "leaf": true}, {"text": "OFICINA ASESORES JURIDICOS",   "leaf": true}]}]}, "success": true}

Solution

From the docs for the model config of a store:

This config is required for the store to be able to read data unless you have defined the fields config which will create an anonymous Ext.data.Model.

So you can define a model for your store or simply adding fields: ['text'] to your store config should do the trick.

EDIT:

I was wrong, it looks like the issue is that you need to define the JSON property where your root is. So in this case that would be 'root.children' I think, but that is causing an infinitely loading tree for me. I got it to work by modifying your JSON so that it just lists the children of the root and doesn't include the root config. See fiddle here.