title: Ext TreePanel: How to add Child Nodes to the expanded node?
body: <p>I am trying to create a Tree from Ext.tree.Panel with JSON data.</p>
  
  <pre><code>My JSON
  {
  "employees": [
  { "firstName":"John" , "lastName":"Doe" }, 
  { "firstName":"Anna" , "lastName":"Smith" }, 
  { "firstName":"Peter" , "lastName":"Jones" }
  ]
  }
  </code></pre>
  
  <p>I want the first level nodes to be the "firstName: from the above JSON. I am able to achieve this but when any of the node is expanded the same nodes are displayed as children to the expanded node shown below.</p>
  
  <pre><code>- John
  ---&gt; + John
  ---&gt; + Anna
  ---&gt; + Peter
  + Anna
  + Peter
  </code></pre>
  
  <p>When any of the node is expanded I want to add children from another JSON file. but here the problem is before adding the children to the node i can see the child nodes attached as above.</p>
  
  <p>Is there any way to avoid this behavior ?</p>
  
  <p>Code Snippet</p>
  
  <pre><code>My TreePanel:
  
  Ext.define('MyApp.view.MyTreePanel', {
  extend: 'Ext.tree.Panel',
  height: 439,
  width: 400,
  title: 'My Tree Panel',
  store: 'MyTreeStore',
  displayField: 'firstName',
  rootVisible: false,
  initComponent: function() {
  var me = this;
  Ext.applyIf(me, {
  viewConfig: {
  }
  });
  me.callParent(arguments);
  }
  });
  
  
  TreeStore:
  
  Ext.define('MyApp.store.MyTreeStore', {
  extend: 'Ext.data.TreeStore',
  requires: [
  'MyApp.model.MyModel'
  ],
  constructor: function(cfg) {
  var me = this;
  cfg = cfg || {};
  me.callParent([Ext.apply({
  autoLoad: true,
  autoSync: true,
  model: 'MyApp.model.MyModel',
  storeId: 'MyTreeStore',
  proxy: {
  type: 'ajax',
  url: 'employees.json',
  reader: {
  type: 'json',
  root: 'employees'
  }
  }
  }, cfg)]);
  }
  });
  
  **Model:**
  
  Ext.define('MyApp.model.MyModel', {
  extend: 'Ext.data.Model',
  fields: [
  {
  name: 'firstName'
  }
  ]
  });
  </code></pre>
  
  <p>Thanks in advance....</p>