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
    Location
    Hyderabad
    Posts
    7

    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.namespace('Ext.ux.plugins');

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

    this.ctxMenu = new Ext.menu.Menu({
    id:'ctxMenu',
    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 = Ext.fly(t).up('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
    this.ctxMenu.show(this.tree.getNodeById(nodeId).ui.getAnchor());
    },

    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
  •