title: ExtJS: How to dynamically add child nodes to treepanel
body: <p>How can you add a child node to an existing TreePanel programmatically using JavaScript?</p>
  
  <p>I have a TreePanel that displays the active layers of a map (using GeoExt):</p>
  
  <pre><code>treeConfig = new OpenLayers.Format.JSON().write([{
      nodeType: "gx_baselayercontainer",
      text: "Base layers",
      expanded: true
      }, {
      nodeType: "gx_overlaylayercontainer",
      text: "Overlays",
      expanded: true,
      loader: {
          baseAttrs: {
              radioGroup: "foo",
              uiProvider: "use_radio"
          }
      }
  }], true);
  
  treePanel = new Ext.tree.TreePanel({
      id: 'mainpanel',
      border: true,
      region: "west",
      title: "Map layers",
      width: 200,
      split: true,
      collapsible: true,
      margins: '0 0 5 5',
      collapseMode: "mini",
      autoScroll: true,
      loader: new Ext.tree.TreeLoader({
          applyLoader: false,
          uiProviders: {
              "use_radio": LayerNodeUI
          }
      }),
      root: {
          nodeType: "async",
          children: Ext.decode(treeConfig)
      },
      listeners: {
          "radiochange": function(node){
              alert(node.layer.name + " is now the the active layer.");
          }
      },
      rootVisible: false,
      lines: false
  });
  </code></pre>
  
  <p>The user should be able to add an overlay layer by pressing a button, however I cannot seem to find any examples on how to accomplish this.</p>
  
  <p>Any ideas?</p>