title: ExtJs - How to load TreeStore with dynamic parameters
body: <p>My tree with treestore gets initially loaded but requesting children nodes fails.</p>
  
  <p>When requesting children, a parameter <code>localpath</code> is transmitted that defines the path where children data is located.</p>
  
  <p>Init request: <code>localpath=/</code> -> gets all children in <code>/</code></p>
  
  <p>Children request: <code>localpath=/subfolder1</code> -> gets all children in <code>/subfolder1</code></p>
  
  <p>I have attached two screenshots showing initial load and showing when folders clicked.</p>
  
  <p><img src="https://i.stack.imgur.com/bvbpE.png" alt="Folders initially loaded"></p>
  
  <p><img src="https://i.stack.imgur.com/2FmV9.png" alt="Folders clicked but no children"></p>
  
  <p>BTW: Where are the arrows gone in my tree?</p>
  
  <p><strong>Json</strong>: My tree stores receives json data like this:</p>
  
  <pre><code>{
      "value": {
        "name": "",
        "path": "/",
        "leaf": false,
        "type": "folder",
        "children": [
          {
            "name": "subfolder1",
            "path": "/subfolder1",
            "leaf": false,
            "type": "folder",
            "children": []
          },
          {
            "name": "subfolder2",
            "path": "/subfolder2",
            "leaf": false,
            "type": "folder",
            "children": []
          },
          {
            "name": "testreports",
            "path": "/testreports",
            "leaf": false,
            "type": "folder",
            "children": []
          }
        ]
      }
  }
  </code></pre>
  
  <p><strong>Store</strong>: the tree store looks like this:</p>
  
  <pre><code> var oTreeStore = Ext.create( 'X.module.store.store.Tree', {
      model    : 'X.module.store.model.TreeNode',
      api      : this.httpApi,
      module   : "store",
      func     : "getchildren",
      scope    : "user"
   } );
  </code></pre>
  
  <p><strong>TreePanel</strong> creation:</p>
  
  <pre><code> var oTreePanel = Ext.create( 'X.module.store.view.TreePanel', {
      store       : oTreeStore
   } );
  </code></pre>
  
  <p><strong>TreePanel</strong> definition:</p>
  
  <pre><code>    constructor: function( oConfig ) {
  
       var self = this;
       //creating a proxy, which can communicate with HTTP-API
       //and is able to parse it's json-tree format
  
       var oProxy = Ext.create( 'X.lib.httpapiclient.Proxy', {
          api     : oConfig.api,
          module  : oConfig.module,
          func    : oConfig.func,
          params  : {
             scope       : oConfig.scope
          },
          reader  : {
             type: 'json',
             root: function( o ) { return o.value? o.value.children : o.children; }
          },
          delay   : oConfig.delay || 100,
          success : oConfig.success || function() {},
          progress: oConfig.progress || function() {},
          error   : oConfig.error || function() {}
       } );
  
       oConfig.nodeParam = 'localpath';
       oConfig.proxy = oProxy;
  
       self.callParent( arguments );
  
       //the HTTP-API requires the ID of the root-node to be empty
       self.on( 'beforeload', function( s, o ) {
          if( o.params.localpath === 'root' ) o.params.localpath = '/';
       } );
  
  
    }
  </code></pre>
  
  <p><strong>Model</strong>: the model...</p>
  
  <pre><code>   Ext.define( 'X.module.store.model.TreeNode', {
        extend: 'Ext.data.Model',
        fields: [
           { name: 'name',         type: 'string' },
           { name: 'path',         type: 'string' },
           { name: 'type',         type: 'string' }
        ]
     } );
  </code></pre>