Results 1 to 2 of 2

Thread: itemmouseenter\itemmouseleave events on grid rows

  1. #1
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    63
    Answers
    5
    Vote Rating
    5
      0  

    Default Answered: itemmouseenter\itemmouseleave events on grid rows

    Hello Guys!

    It seems I have some issue with itemmouseenter\itemmouseleave events on grid rows, I use this events for dynamic display\hide icons on row cells like this
    Code:
    columns: [{
                                header: __('Name'),
                                xtype: 'templatecolumn',
                                tpl: [
                                    '<table style="width:100%;height:14px;table-layout: fixed;">',
                                    '<tr>',
                                    '<td style="overflow:hidden;text-overflow: ellipsis">',
                                    '{i18n_descr}',
                                    '</td><td style="width:20px;">',
                                    '<img class="img-icon-install16" align="right" title="'+__("Install SS")+'" style="float:right; cursor:pointer;margin-bottom: -6px;opacity:0;">',
                                    '</td>',
                                    '</tr>',
                                    '</table>'
                                    ],
                                listeners: {
                                    scope:this,
                                    click: function(g, td, rowIdx, colIdx, Event, record) {
                                        if(Event.target.tagName == 'IMG'&& !Event.target.classList.contains('click')){
                                            Event.target.classList.add('click');
                                            var record = g.getSelectionModel().getSelection()[0];
                                            this.ss_install(record.raw.src);
                                        }
                                    }
                                }
                            }],
    Code:
    itemmouseenter: function(grid, record, item, index, e){
                                print('itemmouseenter', index);
                                var img = item.getElementsByTagName('img')[0];
                                img.style.opacity = 1;
                            },
                            itemmouseleave: function(grid, record, item, index, e){
                                print('itemmouseleave', index);
                                var img = item.getElementsByTagName('img')[0];
                                img.style.opacity = 0;
                            }
    so Am I have any guarantee that after itemmouseenter event fired itemmouseleave event?
    This code works perfect on ExtJS 4.2.1.883 and now on version 4.2.2.1144 sometimes only itemmouseenter fires so image shows on many rows and don't hide.

  2. well my hacky solution is attach to x-grid-row-over own ExtJS css class for sign mouseover row, which displayed stable despite on strange behavior of itemmouseenter\itemmouseleave events

    Code:
    .x-grid-row-over .x-row-over-icon {
        opacity: 1 !important;
    }
    
    .x-row-over-icon {
        opacity: 0;
    }
    and my template update

    Code:
    '<img class="img-icon-delete16  x-row-over-icon" align="right" title="'+__("Uninstall SS")+'" style="float:right; cursor:pointer;margin-bottom: -6px;">',

  3. #2
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    63
    Answers
    5
    Vote Rating
    5
      0  

    Default

    well my hacky solution is attach to x-grid-row-over own ExtJS css class for sign mouseover row, which displayed stable despite on strange behavior of itemmouseenter\itemmouseleave events

    Code:
    .x-grid-row-over .x-row-over-icon {
        opacity: 1 !important;
    }
    
    .x-row-over-icon {
        opacity: 0;
    }
    and my template update

    Code:
    '<img class="img-icon-delete16  x-row-over-icon" align="right" title="'+__("Uninstall SS")+'" style="float:right; cursor:pointer;margin-bottom: -6px;">',

Posting Permissions

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