title: Extjs 4.0.7 How do I re render my treepanel to see changes
body: <p>I am creating an item selector with two boxes that move things back and forth within an extjs application. On the right box, I am creating buttons  that serve to move items up and down. Essentially I am swapping the item with one above or below it. So, my code is straight forward in that regard</p>
  
  <pre><code>MoveUp: function(button, event, eOpts){
    var theChosen = Ext.getStore('storeId').getRootNode().findChild('text', 'Chosen folder');
    var chosenPanel = Ext.ComponenetQuery.query('#chosenTreePanel')[0];
    var selected = chosenPanel.getSelectionModel().getSelection();
  
    for( var i = 1; i &lt; theChosen.childNodes.length; i++){
      if(Ext.Array.contains(selected, theChosen.childNodes[i]) &amp;&amp; (!Ext.Array.contains(selected, theChosen.childNodes[i-1]){
        var temp = theChosen.childNodes[i];
        theChosen.childNodes[i] = theChosen.childNodes[i-1];
        theChosen.childNodes[i-1] = temp;
  
      }
  
    }
  }
  </code></pre>
  
  <p>All of this code seems to work fine, because after clicking my button, and checking the DOM in firebug, I can see that the selected nodes have moved in the array correctly, however, this effect is never shown within my treepanel. ???How do I make the treepanel update when it's elements change. ???</p>
  
  <p>TreePanel heirarchy looks like this just to clarify</p>
  
  <p>Root Node
  'Chosen Folder Node'
  Array of items I am moving up and down within the 'folder'</p>
  
  <p>I am USING VERSION 4.0.7</p>
  
  <p>Attempting to use replaceChild() to fire an event to rerender does not behave as I expected</p>
  
  <p>Changing:</p>
  
  <pre><code>var temp = theChosen.childNodes[i];
  theChosen.childNodes[i] = theChosen.childNodes[i-1];
  theChosen.childNodes[i-1] = temp;
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>var temp = theChosen.childNodes[i];
  theChosen.replaceChild(theChosen.childNodes[i-1], theChosen.childNodes[i]);
  theChosen.replaceChild(temp, theChosen.childNodes[i-1]);
  </code></pre>
  
  <p>Results in odd behavior in which some nodes go missing. Certaintly not what I was looking for. Where am I going wrong here?</p>
  
  <p>Tried the following code using the datachanged and (undocumented)refresh event:</p>
  
  <pre><code>Ext.getStore('storeId').fireEvent('datachanged', Ext.getStore('chosen') );
  Ext.getStore('storeId').fireEvent('datachanged', Ext.getStore('chosen') );
  </code></pre>
  
  <h2>This does not reload anything...</h2>
  
  <p>SOLUTION:</p>
  
  <p>Use the insertChild method of nodeInterface....</p>
  
  <p>I have noticed something strange in how insertChild works in that I need to change my index more based on moving up or down will explain with code below.</p>
  
  <p>To move Up:</p>
  
  <pre><code>theChosen.insertChild( (i-1), theChosen.childNodes[i]);
  </code></pre>
  
  <p>To move down:</p>
  
  <pre><code>theChosen.insertChild( (i+2), theChosen.childNodes[i]);
  </code></pre>
  
  <p>Although the -1 vs +2 they both effectively move the item by one in the appropriate direction.</p>