.. currentmodule:: GeoExt.plugins

:class:`GeoExt.plugins.TreeNodeComponent`
================================================================================


.. cssclass:: meta





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
:class:`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:

.. code-block:: javascript

    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:

.. code-block:: javascript

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