PDA

View Full Version : Is it possible to .highlight() a grid row in 4.x?



Kevin L.
14 Dec 2012, 12:24 PM
In 3.x, I would often use .highlight() on a certain grid row to get the user's attention. In 4.x, I can't seem to get it to work, even though I appear to be targeting the same element; el.hide() works fine, but el.highlight() does nothing (el being the grid row element).


Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var g = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
select: function(rm, record, index, eOpts) {
//Ext.fly(this.getView().getNode(index)).hide(); // works
Ext.fly(this.getView().getNode(index)).highlight(); // does not work
}
}
});
});

Here's a jsFiddle: http://jsfiddle.net/zumbojo/5GktA/3/

What am I doing wrong?

skirtle
14 Dec 2012, 5:37 PM
The highlight effect sets the background-color. You're applying it to the tr but that won't be visible as the selected row has a background-color set on the td elements.

However, calling highlight on the td element won't work either because the selection CSS uses !important and highlight doesn't.

The best you can do is to highlight the inner divs instead:


Ext.fly(this.getView().getNode(index)).select('.x-grid-cell-inner').highlight();

If you want to use the highlight effect on non-selected rows then you can target the tds instead.

slemmon
14 Dec 2012, 7:37 PM
Ran into this myself just recently and decided to go with a 2 blink effect. I'm sure there's a more elegant way to do this, but quick and dirty - here's a blink effect in case you like the effect.



select: function(rm, record, index, eOpts) {
//Ext.fly(this.getView().getNode(index)).hide(); // works
//Ext.fly(this.getView().getNode(index)).highlight(); // does not work
var r = Ext.get(this.view.getNode(index));
var d = 240;
r.animate({
to: { opacity: .5 }
, duration: d/4
, callback: function () {
r.animate({
to: { opacity: 1 }
, duration: d/4
, callback: function () {
r.animate({
to: { opacity: .5 }
, duration: d/4
, callback: function () {
r.animate({
to: { opacity: 1 }
, duration: d/4
, callback: function () {}
});
}
});
}
});
}
});
}

skirtle
14 Dec 2012, 10:41 PM
@slemmon. Perhaps slightly less dirty?


r.animate({
duration: 120,
iterations: 2,
keyframes: {
0: {opacity: 1},
50: {opacity: 0.5},
100: {opacity: 1}
}
});

slemmon
14 Dec 2012, 10:59 PM
Much less dirty. Thank you.
I hadn't seen iterations before as a config for animation() and keyframes didn't even occur to me.

Thx for offering some cleanup for my snippet!