Multiple Grid rows/cells not blinking simultaneously

[IHB1]

Hi,

I am trying to implement the simultaneous blinking of multiple rows and cells of a grid (Sample code attached). I am able to make a single grid row or grid cell blink at a time, but not able to make multiple rows and cells blink simultaneously.

Versions tried: GXT 2.2.5, GXT 2.2.3

package com.mycompany.project.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.fx.FxConfig;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.MarginData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

public class Test implements EntryPoint {

public void onModuleLoad() {
RootPanel.get().add(new GridExample());
}
}

class GridExample extends LayoutContainer {

private ContentPanel cpGrid;

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("forum");
column.setHeader("Forum");
column.setWidth(200);
configs.add(column);

column = new ColumnConfig();
column.setId("subject");
column.setHeader("Subject");
column.setWidth(100);
configs.add(column);

final ColumnModel cm = new ColumnModel(configs);

ListStore<Post> store = new ListStore<Post>();
store.add(getPosts());

final Grid<Post> grid = new Grid<Post>(store, cm);
grid.setAutoExpandColumn("forum");
grid.addListener(Events.Reconfigure, new Listener<GridEvent>() {

public void handleEvent(GridEvent be) {
El.fly(grid.getView().getRow(4)).blink(FxConfig.NONE);
El.fly(grid.getView().getRow(0)).blink(FxConfig.NONE);
El.fly(grid.getView().getCell(2, 1)).blink(FxConfig.NONE);
}
});

cpGrid = new ContentPanel();
cpGrid.setLayout(new FitLayout());
cpGrid.setSize(300, 160);
cpGrid.add(grid);
add(cpGrid);

ButtonBar buttonBar = new ButtonBar();
buttonBar.add(new Button("Blink", new SelectionListener<ButtonEvent>() {

public void componentSelected(ButtonEvent ce) {
ListStore<Post> store = new ListStore<Post>();
store.add(getPosts());
grid.reconfigure(store, cm);
}
}));
add(buttonBar, new MarginData(10));
}

private static List<Post> getPosts() {
List<Post> posts = new ArrayList<Post>();
posts.add(new Post("User1", "Jack"));
posts.add(new Post("User2", "Roland"));
posts.add(new Post("User3", "Eddie"));
posts.add(new Post("User4", "Susahnna"));
posts.add(new Post("User5", "Walter"));
return posts;
}

}

class Post extends BaseModelData {

private static final long serialVersionUID = 1L;

public Post(String subject, String forum) {
setSubject(subject);
setForum(forum);
}

public String getForum() {
return (String) get("forum");
}

public void setForum(String forum) {
set("forum", forum);
}

public String getSubject() {
return (String) get("subject");
}

public void setSubject(String subject) {
set("subject", subject);
}
}

To be more specific, the exact code which I am using for the blink functionality is as follows:

El.fly(grid.getView().getRow(4)).blink(FxConfig.NONE);
El.fly(grid.getView().getRow(0)).blink(FxConfig.NONE);
El.fly(grid.getView().getCell(2, 1)).blink(FxConfig.NONE);

As seen above, I am trying to make 2 rows and a cell blink, but only the cell blinks (as it has been declared last amongst the three).

Is there a workaround to this issue?.

Thanks in advance for your help.

[IHB1]

Got the solution for the above issue..

Instead of using the static method of El, if an instance of El is created instead, the blinking effect is visible for all the elements simultaneously..

So, instead of

El.fly(grid.getView().getRow(4)).blink(FxConfig.NONE);
El.fly(grid.getView().getRow(0)).blink(FxConfig.NONE);
El.fly(grid.getView().getCell(2, 1)).blink(FxConfig.NONE);

We should use

El el1 = new El((Element) grid.getView().getRow(4));
El el2 = new El((Element) grid.getView().getRow(0));
El el3 = new El((Element) grid.getView().getCell(2, 1));
el1.blink(FxConfig.NONE);
el2.blink(FxConfig.NONE);
el3.blink(FxConfig.NONE);