How can you add a child node to an existing TreePanel programmatically using JavaScript?

I have a TreePanel that displays the active layers of a map (using GeoExt):

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
});

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 acplish this.

Any ideas?

How can you add a child node to an existing TreePanel programmatically using JavaScript?

I have a TreePanel that displays the active layers of a map (using GeoExt):

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
});

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 acplish this.

Any ideas?

• javascript
• extjs
• openlayers

3 Answers 3

Grab the parent node by getNodeById or getRootNode and add the child node with appendChild.

See the example at:

http://dev.geoext/geoext/trunk/geoext/examples/layercontainer.html

Is your layers property of the treePanel defined?

treePanel.layers.add(layer);

here is the sample code for dynamically append child to tree panel

Ext.getCmp('treeid').getRootNode().appendChild(response from database);