title: How do I auto expand/auto select added node when adding nodes to ExtJS 4.2 treepanel?
body: <p>The sample code provided is for an ExtJS 4.2 treepanel. If you click the buttons, an Ajax call to PHP adds a node to the tree. </p>
  
  <p>The tree starts out with all folders closed.</p>
  
  <p>I'm wondering how to approach auto selecting the added node, and auto expanding its parent if necessary to show the selected, newly added node. Currently adding a node and refreshing the data causes the tree to return to its initial state, which is all folders closed.</p>
  
  <p>If the user happens to expand some nodes before adding the nodes, I want to remember the tree state, and also auto select the newly selected node, expanding the parent if necessary.</p>
  
  <p>I tried this plugin but it just did not work:
  <a href="https://github.com/AlexTiTanium/ExtJsStatefulTree" rel="nofollow">https://github.com/AlexTiTanium/ExtJsStatefulTree</a></p>
  
  <p>Sorry for the multiple data files at the end. I could not figure out how to update JSON in PHP.</p>
  
  <pre><code>function setData(data, scope) {
      Ext.Ajax.request({
          url: 'data.php',
          method: 'POST',
          params: {
              data: data
          },
          success: function() {
              scope.store.getData(onGetData, scope);
          },
          failure: function() {
              alert('failure');
          },
      }, scope);
  }       
  function onGetData(store, scope, records, success) {
      //alert('here');
  };
  Ext.onReady(function() {
      Ext.create('Ext.tree.Panel', {
          title: 'Tree Refresh Example',
          itemId: 'treeComp',
          width: 300,
          height: 350,
          store: new SampleTreeData(),        
          rootVisible: false,
          listeners: {
              afterRender: function() {
                  this.store.getData(onGetData, this);
              }
          },
          tbar: ['-&gt;', { 
              xtype: 'button', 
              text: 'Add Banana',
              value: "Banana",
              margin: '0 30 0 0',
              listeners: {
                  click: function(comp) {
                      setData(comp.value, this.up('treepanel'));
                  }
              }
          }, { 
              xtype: 'button', 
              text: 'Add Cabbage',
              value: "Cabbage",
              margin: '0 30 0 0',
              listeners: {
                  click: function(comp) {
                      setData(comp.value, this.up('treepanel'));
                  }
              }
          }, { 
              xtype: 'button', 
              text: 'Add Yogurt',
              value: "Yogurt",
              listeners: {
                  click: function(comp) {
                      setData(comp.value, this.up('treepanel'));
                  }
              }
          }, '-&gt;'],
          renderTo: 'content'
      });        
  });
  
  Ext.define('SampleTreeData', {
      extend: 'Ext.data.TreeStore',
      autoLoad: false,
      autoSync: false,
      proxy: {
          type: 'ajax',
          url : '',
          reader: {
              type: 'json',
              root: ''
          }
      },
      root: {
          expanded: true
      },  
      getData: function(callBack, scope) {
          var store = this;
          store.proxy.url = 'data.php';
          store.load({
              scope : scope,
              callback : function(records, operation, success) {
                  if (Ext.isFunction(callBack)) {
                      callBack(store, scope, records, success);
                  }
              }
          });
      }
  });
  
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="../../../../ext-4.2.2.1144/resources/css/ext-all.css" /&gt;
      &lt;script type="text/javascript" src="../../../../ext-4.2.2.1144/ext-all-debug.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="refresh1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="SampleTreeData.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #89E5BD;"&gt;
      &lt;div id="content" style="margin: auto; width: 500px; height: 500px;"/&gt;
  &lt;/body&gt;
  
  &lt;?php
  $logref = fopen('data.log', 'w');
  fwrite($logref, "Entered script.\n");
  
  if(isset($_POST['data'])){
      fwrite($logref, $_POST['data'] . "\n");
      if($_POST['data'] == 'Banana') {
          $newdata = file_get_contents("banana.json");
      } else if($_POST['data'] == 'Cabbage') {
          $newdata = file_get_contents("cabbage.json");
      } else if($_POST['data'] == 'Yogurt') {
          $newdata = file_get_contents("yogurt.json");
      }
      file_put_contents("data.json", $newdata);
      echo 'success';
  }else {
      fwrite($logref, "getData\n");
      $data = file_get_contents("data.json");
      echo $data;
  }
  fclose($logref);
  ?&gt;
  
  ---------------- initial tree data --------------
  [{ 
          text: "Tree Root", 
          expanded: true, 
          children: [ 
              { 
                  text: "Fruits", 
                  children: [ 
                      { leaf:true, text: "apple" }, 
                      { leaf:true, text: "orange" } 
                  ] 
              }, 
              { 
                  text: "Vegetables", 
                  children: [ 
                      { leaf:true, text: "carrot" }, 
                      { leaf:true, text: "beet" }
                  ] 
              }, 
              { 
                  text: "Dairy", 
                  children: [ 
                      { leaf:true, text: "milk" }, 
                      { leaf:true, text: "cheese" } 
                  ] 
              } 
          ] 
      }]
  
  ----------- data if Banana is clicked -----------
  [{ 
          text: "Tree Root", 
          expanded: true, 
          children: [ 
              { 
                  text: "Fruits", 
                  children: [ 
                      { leaf:true, text: "apple" }, 
                      { leaf:true, text: "orange" }, 
                      { leaf:true, text: "banana" } 
                  ] 
              }, 
              { 
                  text: "Vegetables", 
                  children: [ 
                      { leaf:true, text: "carrot" }, 
                      { leaf:true, text: "beet" } 
                  ] 
              }, 
              { 
                  text: "Dairy", 
                  children: [ 
                      { leaf:true, text: "milk" }, 
                      { leaf:true, text: "cheese" } 
                  ] 
              } 
          ] 
      }]
  
  ----------- data if cabbage is clicked --------
  [{ 
          text: "Tree Root", 
          expanded: true, 
          children: [ 
              { 
                  text: "Fruits", 
                  children: [ 
                      { leaf:true, text: "apple" }, 
                      { leaf:true, text: "orange" } 
                  ] 
              }, 
              { 
                  text: "Vegetables", 
                  children: [ 
                      { leaf:true, text: "carrot" }, 
                      { leaf:true, text: "beet" }, 
                      { leaf:true, text: "cabbage" }
                  ] 
              }, 
              { 
                  text: "Dairy", 
                  children: [ 
                      { leaf:true, text: "milk" }, 
                      { leaf:true, text: "cheese" } 
                  ] 
              } 
          ] 
      }]
  
  ----------- data if yogurt is clicked -------
  [{ 
          text: "Tree Root", 
          expanded: true, 
          children: [ 
              { 
                  text: "Fruits", 
                  children: [ 
                      { leaf:true, text: "apple" }, 
                      { leaf:true, text: "orange" } 
                  ] 
              }, 
              { 
                  text: "Vegetables", 
                  children: [ 
                      { leaf:true, text: "carrot" }, 
                      { leaf:true, text: "beet" } 
                  ] 
              }, 
              { 
                  text: "Dairy", 
                  children: [ 
                      { leaf:true, text: "milk" }, 
                      { leaf:true, text: "cheese" }, 
                      { leaf:true, text: "yogurt" }
                  ] 
              } 
          ] 
      }]
  </code></pre>