Results 1 to 2 of 2

Thread: DataView : Handling Mouseover

  1. #1
    Sencha User
    Join Date
    Aug 2013
    Posts
    35

    Default DataView : Handling Mouseover

    I want to highlight the current row when i hover over a particular row . For the same I propose to use Mouse Over Event. How can i achieve the same. The idea is to change the background color on the current row.

    Ext.apply(this, {
    items: [{
    xtype: 'dataview',
    store: 'EmployeeStore',
    itemSelector: 'p.thumb-wrap',
    multiSelect: true,
    trackOver: true,
    overItemCls: 'x-item-over',

    tpl : new Ext.XTemplate(
    '<tpl for=".">',
    '<p class="thumb-wrap" style="padding:0.75px;margin:0.75px;background-color:#F7F1F1">',
    'Name : {name}, Email : {email}',
    '</p>',
    '</tpl>'
    ),
    listeners: {
    selectionchange: function (dv, nodes) {
    var l = nodes.length,
    s = l !== 1 ? 's' : '';
    this.up('panel').setTitle('Selected items : (' + l + ' item' + s + ' selected)');
    },
    mouseenter: function (dataView, index, node, e) {
    console.log('mouseover...');
    }
    }
    }]

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    With overItemCls config being set all you need is just creating respective css entry.

Posting Permissions

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