title: How do I show nested data into a tree?
body: <p>Further progress. Please see at <a href="http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel" rel="nofollow">http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel</a></p>
  
  <p>I always appreciate any further advise. </p>
  
  <hr>
  
  <p>I am trying to develop a simple extJS Ext 4.0.2a script to display some nested data as a Drag&amp;Drop tree.
  To try, I use a simple example from <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader" rel="nofollow">http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader</a></p>
  
  <p>Data are given as a users.json file:</p>
  
  <pre><code>{
  "users": [
      {
          "id": 123,
          "name": "Ed",
          "orders": [
              {
                  "id": 50,
                  "total": 100,
                  "order_items": [
                      {
                          "id"      : 20,
                          "price"   : 40,
                          "quantity": 2,
                          "product" : {
                              "id": 1000,
                              "name": "MacBook Pro"
                          }
                      },
                      {
                          "id"      : 21,
                          "price"   : 20,
                          "quantity": 3,
                          "product" : {
                              "id": 1001,
                              "name": "iPhone"
                          }
                      }
                  ]
              }
          ]
      }
  ]
  }
  </code></pre>
  
  <p>I wish to display data as a tree, whose first level nodes are users, second level nodes are orders, and so on.</p>
  
  <p>From the same doc, I learn how to define my models (I believe):</p>
  
  <pre><code>    Ext.define("User", {
      extend: 'Ext.data.Model',
      fields: [
          'id', 'name'
      ],
  
      hasMany: {model: 'Order', name: 'orders'},
  
      proxy: {
          type: 'ajax', // rest
          url : 'users.json',
          reader: {
              type: 'json',
              root: 'users'
          }
      }
  })
  
  ;
  
  Ext.define("Order", {
      extend: 'Ext.data.Model',
      fields: [
          'id', 'total'
      ],
  
      hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
      belongsTo: 'User'
  });
  
  Ext.define("OrderItem", {
      extend: 'Ext.data.Model',
      fields: [
          'id', 'price', 'quantity', 'order_id', 'product_id'
      ],
  
      belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
  });
  
  Ext.define("Product", {
      extend: 'Ext.data.Model',
      fields: [
          'id', 'name'
      ],
  
      hasMany: 'OrderItem'
  });
  </code></pre>
  
  <p>next, I define a tree store and a tree panel (for some selected fields):</p>
  
  <pre><code>    var store = Ext.create('Ext.data.TreeStore', {
          model: 'User',
          autoLoad: true,
          autoSync: true,
       root: {
          name: "Root node",
          id: '0',
          expanded: true
      }, 
     sorters: [{
          property: 'id',
          direction: 'ASC' // DESC
      }]
  });
  
  var tree = Ext.create('Ext.tree.Panel', {
          store: store,  
      displayField: 'name', // what nodes display (default-&gt;text)
          columns: [{
          xtype: 'treecolumn',
          text: 'name',
          dataIndex: 'name',
          width: 150,
          sortable: true
      }, {
          text: 'total',
          dataIndex: 'total',
      width: 150,
          flex: 1,
          sortable: true
      }, {
          text: 'price',
          dataIndex: 'price',
      width: 50,
          flex: 1,
          sortable: true
      },{ 
          text: 'quantity',
          dataIndex: 'quantity',
      width: 150,
          flex: 1
      }, {
          text: 'id',
          dataIndex: 'id',
          flex: 1,
          width: 15,
          sortable: true
      }],
          collapsible: true,
          viewConfig: {
              plugins: {
                  ptype: 'treeviewdragdrop',  // see Ext.tree.plugin.TreeViewDragDrop
                  nodeHighlightColor : '7B68EE',
          nodeHighlightOnDrop : true, 
          nodeHighlightOnRepair: true, 
          enableDrag: true, 
          enableDrop: true
              }
         },
          renderTo: 'tree-div',
          height: 300,
          width: 900,
          title: 'Items',
          useArrows: true,
          dockedItems: [{
              xtype: 'toolbar',
              items: [{
                  text: 'Expand All',
                  handler: function(){
                      tree.expandAll();
                  }
              }, {
                  text: 'Collapse All',
                  handler: function(){
                      tree.collapseAll();
                  }
              }]
          }]
      });
  });
  </code></pre>
  
  <p>I see the panel, the root and the first level users (as subnodes of the root). I do not see any subnodes (orders, order_items and so on). </p>
  
  <p>I looked carefully at a number of posts, improved things quite a lot, but still miss to get a working solution.</p>