# GeoExt

### Navigation

- GeoExt »
- API Reference »
- `GeoExt.plugins` »
- `GeoExt.plugins.TreeNodeComponent`

# `GeoExt.plugins.TreeNodeComponent`

ptype
  `gx_TreeNodeComponent`

A plugin to create tree node UIs that can have an Ext.Component below the node’s title. Can be plugged into any `Ext.tree.TreePanel` and will be applied to nodes that are extended with the `GeoExt.Tree.TreeNodeUIEventMixin`.

If a node is configured with a `component` attribute, it will be rendered with the component in addition to icon and title.

## Example Use

Sample code to create a tree with a node that has a component:

    var uiClass = Ext.extend(
        Ext.tree.TreeNodeUI,
        GeoExt.tree.TreeNodeUIEventMixin
    );
    var tree = new Ext.tree.TreePanel({
        plugins: [
            new GeoExt.plugins.TreeNodeRadioButton({
                listeners: {
                    "radiochange": function(node) {
                        alert(node.text + "'s radio button was clicked.");
                    }
                }
            })
        ],
        root: {
            nodeType: "node",
            uiProvider: uiClass,
            text: "My Node",
            component: {
                xtype: "box",
                autoEl: {
                    tag: "img",
                    src: "/images/my-image.jpg"
                }
            }
        }
    }

Sample code to create a layer node UI with a radio button:

    var uiClass = Ext.extend(
        GeoExt.tree.LayerNodeUI,
        new GeoExt.tree.TreeNodeUIEventMixin
    );

### Navigation

- index
- modules |
- next |
- previous |
- GeoExt »
- API Reference »
- `GeoExt.plugins` »
- `GeoExt.plugins.TreeNodeComponent`