PDA

View Full Version : Grid Row not blinking when trying from inside Store.Update event listener



IHB1
14 Nov 2011, 10:55 PM
Hi everyone,

I am trying to make the updated row of a grid blink (to indicate to the user that the data of that particular row has been changed/updated).

GXT Version used: GXT 2.2.5

I am updating the data of the grid row using the Store.Update method. This method fires an Update event inside which I am trying to make that particular updated row blink to indicate to the user that the data of that row has been updated.
The specific code I am using to make the row blink is as follows:

store.addListener(Store.Update, new Listener<StoreEvent<Post>>() {

public void handleEvent(StoreEvent<Post> be) {
grid.getView().refresh(true);
El el2 = new El((Element) grid.getView().getRow(be.getModel()));
el2.blink(FxConfig.NONE);
}
});

For some reason, the row is not blinking even though it is getting the required Element row.

The complete sample code for testing purposes is as follows:

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.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.store.Store;
import com.extjs.gxt.ui.client.store.StoreEvent;
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 ListStore<Post> store = new ListStore<Post>();
private ContentPanel cpGrid;
private Grid<Post> grid = null;

@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);

store = new ListStore<Post>();
store.add(getPosts());
//The Store.Update Event Listener
store.addListener(Store.Update, new Listener<StoreEvent<Post>>() {

public void handleEvent(StoreEvent<Post> be) {
grid.getView().refresh(true);
El el2 = new El((Element) grid.getView().getRow(be.getModel()));
el2.blink(FxConfig.NONE);
}
});

grid = new Grid<Post>(store, cm);
grid.setAutoExpandColumn("forum");

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

ButtonBar buttonBar = new ButtonBar();
//The blink button updates the grid row
buttonBar.add(new Button("Blink", new SelectionListener<ButtonEvent>() {

public void componentSelected(ButtonEvent ce) {
for (Post postUpd : getPostsUpd()) {
if (store.findModel(postUpd) != null) {
//The grid row is updated here. This action fires the Store.Update Event
store.update(postUpd);
}
}
}
}));
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;
}

private static List<Post> getPostsUpd() {
List<Post> posts = new ArrayList<Post>();
posts.add(new Post("User2Upd", "Roland"));
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);
}

@Override
public boolean equals(Object obj) {
return obj != null ? (((Post) obj).getForum().equalsIgnoreCase(this.getForum())) : false;
}

@Override
public int hashCode() {
return 10;
}
}

Upon running the code and clicking on the 'Blink' button, you would notice that the second row of the grid gets updated alright but does not blink upon updation.

I would appreciate any help on this issue.

Thanks.

sven
15 Nov 2011, 12:10 AM
You are blinking the old row. Put the logic in a finally command.

IHB1
15 Nov 2011, 1:05 AM
Hi Sven,

Thanks for the prompt reply.

I had some doubts to clarify. By 'finally command', do you mean that I should be invoking that logic in some user-defined method (which I would be calling after all the updates are done)? Or is it some GXT event I could listen to?.

As a workaround, I have maintained a user-defined List in which I am adding all the rows which have been updated. After all the updates are done, I am iterating over the List and calling the blink functionality on each row. Is this the approach you meant?..

sven
15 Nov 2011, 1:10 AM
Scheduler.get().scheduleFinally...

IHB1
15 Nov 2011, 1:56 AM
Thanks, Sven..

I put the logic inside the Scheduler. Of course, I still had to maintain the user-defined list of updated rows and loop over it inside the Scheduler.


Scheduler.get().scheduleFinally(new Scheduler.ScheduledCommand() {

public void execute() {
//recordsToBlink is my list of updated rows
for (Post post : recordsToBlink) {
El el = new El((Element) grid.getView().getRow(post));
el.blink(FxConfig.NONE);
}
}

});

sven
15 Nov 2011, 2:07 AM
But it is working now?

You can listen to the update event of the store, get the item of the update event and than put the highlight logic in a finally command within the update event. No need to maintain a list.

IHB1
15 Nov 2011, 2:53 AM
Hi Sven,

Sorry for the delay in replying..You are right..it works the way you mentioned for Store.Update events.


store.addListener(Store.Update, new Listener<StoreEvent>() {

public void handleEvent(final StoreEvent be) {
Scheduler.get().scheduleFinally(new Scheduler.ScheduledCommand() {

public void execute() {
El el = new El((Element) grid.getView().getRow(be.getModel()));
el.blink(FxConfig.NONE);
}

});
}
});

I was trying the same code for the Store.Add event (When I am adding a new record to the grid) but it is not working for the Add event.

store.addListener(Store.Add, new Listener<StoreEvent>() {

public void handleEvent(final StoreEvent be) {
Scheduler.get().scheduleFinally(new Scheduler.ScheduledCommand() {

public void execute() {
grid.getView().refresh(true);
El el = new El((Element) grid.getView().getRow(be.getModel()));
el.blink(FxConfig.NONE);
}

});
}
});

I guess it is because the view does not have the new row in it at the time of addition. Which is why I refreshed the view before invoking the blink method. But it is not working with that too.

sven
15 Nov 2011, 2:57 AM
Are you sure that be.getModel actually returns something? Normally for the Add event it is getModels, which returns a list.

Also why do you refresh the view?

IHB1
15 Nov 2011, 3:06 AM
Right Again!!..Sorry for the mistake..Am pasting the code for the benefit of others


store.addListener(Store.Add, new Listener<StoreEvent>() {

public void handleEvent(final StoreEvent be) {
Scheduler.get().scheduleFinally(new Scheduler.ScheduledCommand() {

public void execute() {
El el = new El((Element) grid.getView().getRow((Post)be.getModels().get(0)));
el.blink(FxConfig.NONE);
}

});
}
});
Thanks a lot for your effort and prompt replies, Sven..:)..Appreciate it a lot!!..