PDA

View Full Version : DataView : Handling Mouseover



rajuarien
8 Oct 2013, 8:38 PM
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...');
}
}
}]

ettavolt
10 Oct 2013, 1:00 AM
With overItemCls config being set all you need is just creating respective css entry.