1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    20
    Vote Rating
    4
    andrevio is on a distinguished road

      0  

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

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


    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:

    Code:
    {
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Since you have the item, get the Ext.Element of it and find the icon then show/hide.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    20
    Vote Rating
    4
    andrevio is on a distinguished road

      0  

    Default


    Thank you very much, mitchellsimoens. This is exactly what I needed. For the record, here is the final code that works:
    Code:
    {
    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:
    Code:
     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!

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    ju187 is on a distinguished road

      0  

    Default add action column

    add action column


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

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    20
    Vote Rating
    4
    andrevio is on a distinguished road

      0  

    Default


    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.
    Code:
    {
        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!

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    ju187 is on a distinguished road

      0  

    Default


    thanks a bunch

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    9
    Vote Rating
    1
    joaquingt is on a distinguished road

      0  

    Default


    Quote Originally Posted by andrevio View Post
    Thank you very much, mitchellsimoens. This is exactly what I needed. For the record, here is the final code that works:
    Code:
    {
    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:
    Code:
     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

    Code:
    var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
    maybe this can help someone

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    81
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default Highlightitem

    Highlightitem


    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.

    Code:
    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');
                        }
                    }

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar