Results 1 to 1 of 1

Thread: How to add an image next to the tree node

  1. #1
    Ext User
    Join Date
    Mar 2010

    Default How to add an image next to the tree node

    Hello All,

    My actual requirement is to add an image next to the tree node text which will be hidden by default. And when the user keeps the mouse over the node this image has to be shown.
    On mouse over of the image a context menu has to appear. Please see the attachment for more clarity

    Currently, I am able to display a context menu on mouse over of the tree node (Of course, by using the plugins available in the ExtJS forum :-). Code is here:


    Ext.ux.plugins.NodeMouseOverAndOutPlugin = Ext.extend(Object, {
    init: function(tree) {
    if (!tree.rendered) {
    tree.on('render', function() {this.init(tree)}, this);
    this.tree = tree;

    this.ctxMenu = new{
    items: [
    { id:'goTo', text:'Go to' },
    { id:'CAWOT', text:'Column along with other text' },
    { id:'AST', text:'As seperate table' }

    tree.body.on('mouseover', this.onTreeMouseover, this, {delegate: 'a.x-tree-node-anchor'});

    tree.body.on('mouseout', this.onTreeMouseout, this, {delegate: 'a.x-tree-node-anchor'});

    onTreeMouseover: function(e, t) {
    var nodeEl ='div.x-tree-node-el');
    if (nodeEl) {
    var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
    if (nodeId) {
    this.tree.fireEvent('mouseover', this.tree.getNodeById(nodeId), e);
    // Write code here;

    onTreeMouseout: function(e, t) {
    var nodeEl = Ext.get(t);
    if (nodeEl) {
    var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
    if (nodeId) {
    this.tree.fireEvent('mouseout', this.tree.getNodeById(nodeId), e);
    // Write code here

    Could any one please help me... Thanks in advance..
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts