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.