extjs 4 - treepanel - showing action column icon when mousing over a row

[andrevio]

Hello,

Having an action column is a convenient way to work with a particular row in a treepanel. However, I find that it's excessive to have the same icon always displayed for every single row in the treepanel. It'd be much more elegant to display the action icon for the given row only when mousing over that row.

I have tried a few things but haven't been able to piece everything together...

Here is how I am listening for mouse over events:

{
xtype: 'treepanel',
...
    {
        xtype:'actioncolumn',
        items: [{
            icon: 'myicon.png',              
            handler: function(grid, rowIndex, colIndex) {
                // do something when icon is clicked
            },
    }


listeners: {
    itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
        // show the icon - is this possible?
    },
    
    itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
        // hide the icon
    }    
}

Any suggestions as to how to show/hide the icon from within the itemmouseenter/itemmouseleave function? Any ideas are much appreciated.
Thank you.

[mitchellsimoens]

Since you have the item, get the Ext.Element of it and find the icon then show/hide.

[andrevio]

Thank you very much, mitchellsimoens. This is exactly what I needed. For the record, here is the final code that works:

{
xtype: 'treepanel',
...
    {
        xtype:'actioncolumn',
        items: [{
            icon: 'myicon.png',              
            handler: function(grid, rowIndex, colIndex) {
                // do something when icon is clicked
            },
    }




listeners: {
    itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
        // show the icon
        var cmp = Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]');                                                    
        cmp.removeCls('x-hide-display');
        cmp.addCls('x-grid-center-icon');
    },
    
    itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
        // hide the icon
        var cmp = Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]');                                              
        cmp.removeCls('x-grid-center-icon');
        cmp.addCls('x-hide-display');        
    }    
}

As you can see, I ended up using the id of the "item" in constructing the select statement, along with the icon name:

 Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]')

Once the component was found, the rest was easy - adding/removing the css class to show/hide the icon.
Thanks again!

[ju187]

Could you a bit more codes? I tried the same thing, but the icon did not show up. thanks.

[andrevio]

Hi ju187,

I am guessing that you may need to tweak the getClass method to specifically add the "x-hide-display" class to the column. Thus, the icon would be there but not shown.

{
    xtype:'actioncolumn',
    items: [{
        icon: 'myicon.png',  
        scope: this,
        getClass: function(value,meta,record,rowIx,colIx, store) {            
            return 'x-hide-display';  //Hide the action icon
        }
    }]
...

Thus, once the mouse pointer is over the row, the itemmouseenter is invoked, where the 'x-hide-display' is replaced with 'x-grid-center-icon'. Hope this helps!

[ju187]

thanks a bunch

[joaquingt]

Thank you very much, mitchellsimoens. This is exactly what I needed. For the record, here is the final code that works:

{
xtype: 'treepanel',
...
    {
        xtype:'actioncolumn',
        items: [{
            icon: 'myicon.png',              
            handler: function(grid, rowIndex, colIndex) {
                // do something when icon is clicked
            },
    }




listeners: {
    itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
        // show the icon
        var cmp = Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]');                                                    
        cmp.removeCls('x-hide-display');
        cmp.addCls('x-grid-center-icon');
    },
    
    itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
        // hide the icon
        var cmp = Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]');                                              
        cmp.removeCls('x-grid-center-icon');
        cmp.addCls('x-hide-display');        
    }    
}

As you can see, I ended up using the id of the "item" in constructing the select statement, along with the icon name:

 Ext.select('#' + Ext.get(item).id +' [src~="myicon.png"]')

Once the component was found, the rest was easy - adding/removing the css class to show/hide the icon.
Thanks again!

thx for sharing, i had a problem with internet explorer, seems like you cant get a reference to the image using the source, so i ended with this

var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');

maybe this can help someone

[mpost]

Here's a slightly better (or just different?) version that uses the highlightitem event. This version has some advantages:

1. Does not rely on component ids
2. Works with both mouse and keyboard input
3. Works for a list of actions (just an implementation detail really)

Unfortunately it still relies on the x-hide-display class. I tried using getClass on each item to start each each item off as visibility: hidden, but I just couldn't get it to work. This works on a grid, but I've haven't tried against a tree. Hopefully someone finds it useful.

listeners: {
                highlightitem: function(view, node, eOpts)
                {
                    var rowEl = Ext.get(node);
                    if (Ext.isEmpty(rowEl))
                        return;


                    var actions = rowEl.query('[class~="x-action-col-icon"]');
                    if (Ext.isEmpty(actions))
                        return;


                    for (var i = 0, len = actions.length; i < len; i++)
                    {
                        var el = Ext.get(actions[i]);
                        if (!Ext.isEmpty(el) && el.hasCls('x-hide-display'))
                            el.removeCls('x-hide-display');
                    }
                },
                unhighlightitem: function(view, node, eOpts)
                {
                    var rowEl = Ext.get(node);
                    if (Ext.isEmpty(rowEl))
                        return;


                    var actions = rowEl.query('[class~="x-action-col-icon"]');
                    if (Ext.isEmpty(actions))
                        return;


                    for (var i = 0, len = actions.length; i < len; i++)
                    {
                        var el = Ext.get(actions[i]);
                        if (!Ext.isEmpty(el) && !el.hasCls('x-hide-display'))
                            el.addCls('x-hide-display');
                    }
                }