# GeoExt

### Navigation

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

# `GeoExt.plugins.TreeNodeActions`

ptype
  `gx_treenodeactions`

A plugin to create tree node UIs with actions.

An action is a clickable image in a tree node, which, when clicked, leads to an “action” event being triggered by the node.

To set actions in a node an `actions` property must be provided in the node config options. This property is an array of action objects, each action object has the following property:

- “action” `String` the name of the action. It is used as the name of the `<img>` class. The `img` tag being placed in a div whose class is “gx-tree-layer-actions” a CSS selector for the action is `.gx-tree-layer-actions .action-name`. The name of the action is also provided in the “action” event for listeners to know which action got clicked. (required)
- “qtip” `String` the tooltip displayed when the action image is hovered. (required)
- “update” `Function` a function executed after the action is rendered in the node, it receives the `Ext.Element` object representing the image and executes with the node as its scope. For example, this function can be used to hide the action based on some condition. (optional)

## Example Use

Sample code to create a layer node UI with an actions plugin:

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

    // this function takes action based on the "action"
    // parameter, it is used as a listener to layer
    // nodes' "action" events
    function onAction(node, action, evt) {
        var layer = node.layer;
        switch(action) {
        case "delete":
            layer.destroy();
            break;
        }
    };

    var tree = new Ext.tree.TreePanel({
        region: "west",
        width: 250,
        title: "Layer Tree",
        loader: {
            applyLoader: false,
            uiProviders: {
                "ui": GeoExt.examples.LayerNodeUI
            }
        },
        // apply the tree node actions plugin to layer nodes
        plugins: [{
            ptype: "gx_treenodeactions",
            listeners: {
                action: onAction
            }
        }],
        root: {
            nodeType: "gx_layercontainer",
            loader: {
                baseAttrs: {
                    radioGroup: "radiogroup",
                    uiProvider: "ui",
                    actions: [{
                        action: "delete",
                        qtip: "delete"
                    }]
                }
            }
        },
        rootVisible: false
    });

## Events

Events.

`radiochange`

  Fires when an action image is clicked.

  Listener arguments:

  - node - `Ext.TreeNode` The node of the clicked action image.

### Navigation

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