PDA

View Full Version : Updating Data in live grid store is not displayed on the grid



OZKA
27 Dec 2010, 12:54 AM
If i'm scrolling grid so that the cell goes out of sight and scroll it back, the updates become visible. This problem appeared only after replacing the usual grid for a live grid. For example it is not observed when using the paging grid.

Here is grid initialization and store update listing


...
reader = new BeanModelReader();
loader = new BasePagingLoader<PagingLoadResult<BaseTableModel>>(proxy, reader);


loader.setRemoteSort(true);

store = new ListStore<BeanModel>(loader);
store.setMonitorChanges(true);
...
ColumnModel cm = new ColumnModel(columns);
grid = new Grid<BeanModel>(store, cm);
grid.setLoadMask(true);
grid.setBorders(true);
grid.setAutoExpandColumn(autoExpandColumn);

LiveGridView liveView = new LiveGridView();
liveView.setEmptyText("No rows available on the server.");
grid.setView(liveView);

ToolBar toolBar = new ToolBar();
toolBar.add(new FillToolItem());

LiveToolItem item = new LiveToolItem();
item.bindGrid(grid);

toolBar.add(item);
panel.setBottomComponent(toolBar);

...
store().update(model);

sven
27 Dec 2010, 2:15 AM
If i'm scrolling grid so that the cell goes out of sight and scroll it back, the updates become visible.

So when the update gets displayed, what is the problem? Also a LiveGridViIew is a "live" streaming from from serverside. Client modifications will get lost.

OZKA
27 Dec 2010, 2:43 AM
I want the grid to be updated like in this example (http://www.sencha.com/examples/explorer.html#gridstorebinding). In my case, store updates, but the cell on the screen is not redrawn. The problem is not with server code, the problem is in the local code. I understand how live grid server side is working.

sven
27 Dec 2010, 2:48 AM
It wont work like that. As soon as you scroll it out and scroll it in again, information could be lost. You will need to add changes to your code to intercept this.

OZKA
27 Dec 2010, 3:08 AM
You mean that live grid does not work like paging grid or grid in this example (http://www.sencha.com/examples/explorer.html#gridstorebinding)? Data in store is already updated, loaders from server side work correctly, i just want to see updated value from store in grid's cell.

sven
27 Dec 2010, 3:09 AM
Paging also looses change informations when you change pages and go back. LiveGridView is doing the same on scrolling.

OZKA
27 Dec 2010, 5:39 AM
Try to execute this code, to understand what i mean in this thread. Scenario: click edit, click check store and you will see no change in grid's cell. But if you scroll changed cell, you will see new cell data.



package ru.dentplan.client.view.dev.sencha;

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

import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelFactory;
import com.extjs.gxt.ui.client.data.BeanModelLookup;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
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.grid.LiveGridView;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.toolbar.FillToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.LiveToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;

class SimpleAddEditForm {

private SampleBean bean;
private ListStore<BeanModel> store;

private Window window = new Window();


public Window getWindow() {
return window;
}

public SimpleAddEditForm(SampleBean bean, ListStore<BeanModel> store) {
this.bean = bean;
this.store = store;
}

public void init() {
window.setMinimizable(false);
window.setMaximizable(false);
window.setHeading("Edit Form");
window.setSize(640, 480);
window.setResizable(false);
window.setModal(true);
window.setLayout(new FitLayout());

FormPanel formPanel = new FormPanel();
formPanel.setHeaderVisible(false);

TextField<String> tf = new TextField<String>();
tf.setFieldLabel("Name field");
tf.setWidth(200);
tf.setName("name");

formPanel.add(tf, new FormData("50%"));

FormBinding formBinding = new FormBinding(formPanel);
BeanModelFactory factory = BeanModelLookup.get().getFactory(bean.getClass());
final BeanModel beanModel = factory.createModel(bean);


formBinding.autoBind();
formBinding.bind(beanModel);

Button saveBtn = new Button("Save");

saveBtn.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce) {
store.update(beanModel);
window.hide();
}
});

formPanel.addButton(saveBtn);

Button cancelBtn = new Button("Отмена");

cancelBtn.addSelectionListener(new SelectionListener<ButtonEvent>(){

@Override
public void componentSelected(ButtonEvent ce) {
window.hide();
}

});

formPanel.addButton(cancelBtn);
window.add(formPanel);
}

}

class LiveGrid {
private ListStore<BeanModel> store;
private BasePagingLoader<PagingLoadResult<SampleBean>> loader;
private BeanModelReader reader;
private RpcProxy<PagingLoadResult<SampleBean>> proxy;
private List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
private Grid<BeanModel> grid;
private ContentPanel panel = new ContentPanel();
private SampleBean current;
private Button editButton = new Button("Edit");
public LiveGrid() {

final GridServiceAsync service = (GridServiceAsync) GWT.create(GridService.class);

proxy = new RpcProxy<PagingLoadResult<SampleBean>>() {

@Override
protected void load(Object loadConfig,
AsyncCallback<PagingLoadResult<SampleBean>> callback) {
service.runService((PagingLoadConfig) loadConfig, callback);
}

};
reader = new BeanModelReader();
loader = new BasePagingLoader<PagingLoadResult<SampleBean>>(proxy, reader);
loader.setRemoteSort(true);

store = new ListStore<BeanModel>(loader);
store.setMonitorChanges(true);

columns.add(new ColumnConfig("id", "id", 50));
columns.add(new ColumnConfig("name", "name", 200));

ColumnModel cm = new ColumnModel(columns);
grid = new Grid<BeanModel>(store, cm);
grid.setLoadMask(true);
grid.setBorders(true);
grid.setAutoExpandColumn("name");
grid.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
@Override
public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
applySelection(se.getSelectedItem());
}

});

LiveGridView liveView = new LiveGridView();
liveView.setEmptyText("No rows available on the server.");
grid.setView(liveView);

ToolBar toolBar = new ToolBar();
toolBar.add(new FillToolItem());

LiveToolItem item = new LiveToolItem();
item.bindGrid(grid);

toolBar.add(item);
editButton.addSelectionListener(new SelectionListener<ButtonEvent>(){

@Override
public void componentSelected(ButtonEvent ce) {
if (current != null) {
SimpleAddEditForm editForm = new SimpleAddEditForm(current, store);
editForm.init();
editForm.getWindow().show();
}
}

});

panel.addButton(editButton);
panel.setHeight(300);
panel.setHeading("Live Grid");
panel.setLayout(new FitLayout());
panel.add(grid);
panel.setBottomComponent(toolBar);

Button checkButton = new Button("Check store");
checkButton.addSelectionListener(new SelectionListener<ButtonEvent>(){

@Override
public void componentSelected(ButtonEvent ce) {
if (current != null)
Info.display("Bean info from store", current.toString());
}

});

panel.addButton(checkButton);
}

public ContentPanel getPanel() {
return panel;
}

private void applySelection(BeanModel model) {
if (model != null) {
current = model.getBean();

} else {
current = null;
}
}

}

public class GridStoreProblem {

private Window window = new Window();
public GridStoreProblem() {}

public void init() {
window.setMinimizable(true);
window.setMaximizable(true);
window.setModal(true);
window.setHeading("LiveGridFormDev");
window.setSize(640, 480);
window.setResizable(false);
window.setLayout(new FitLayout());

LiveGrid lg = new LiveGrid();

window.add(lg.getPanel());
}

public Window getWindow() {
return window;
}

}

package ru.dentplan.client.view.dev.sencha;

import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
/**
* For web.xml:
* <servlet>
<servlet-name>problemservice</servlet-name>
<servlet-class>ru.dentplan.server.dev.sencha.GridServiceImpl</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>problemservice</servlet-name>
<url-pattern>/dentplandev/problemservice</url-pattern>
</servlet-mapping>

* */
@RemoteServiceRelativePath("problemservice")
public interface GridService extends RemoteService {
public PagingLoadResult<SampleBean> runService(PagingLoadConfig config);
}

package ru.dentplan.client.view.dev.sencha;

import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.google.gwt.user.client.rpc.AsyncCallback;

public interface GridServiceAsync {
public void runService(PagingLoadConfig config, AsyncCallback<PagingLoadResult<SampleBean>> callback);
}

package ru.dentplan.server.dev.sencha;


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

import ru.dentplan.client.view.dev.sencha.GridService;
import ru.dentplan.client.view.dev.sencha.SampleBean;

import com.extjs.gxt.ui.client.data.BasePagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;

public class GridServiceImpl extends RemoteServiceServlet implements GridService{

/**
*
*/
private static final long serialVersionUID = 1L;

@Override
public PagingLoadResult<SampleBean> runService(PagingLoadConfig config) {
List<SampleBean> list = new ArrayList<SampleBean>();

for(int i = 0; i <150; i++) {
list.add(new SampleBean(i, "Name" + i));
}

return new BasePagingLoadResult<SampleBean>(list, config.getOffset(), list.size());
}

}

package ru.dentplan.client.view.dev.sencha;

import java.io.Serializable;

import com.extjs.gxt.ui.client.data.BeanModelTag;

public class SampleBean implements BeanModelTag, Serializable {

/**
*
*/
private static final long serialVersionUID = 1L;
private int id;
private String name;

public SampleBean(){}
public SampleBean(int id, String name){
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}

public String toString() {
return "id: " + id + ", name: " + name;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + id;
result = prime * result + ((name == null) ? 0 : name.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
SampleBean other = (SampleBean) obj;
if (id != other.id)
return false;
if (name == null) {
if (other.name != null)
return false;
} else if (!name.equals(other.name))
return false;
return true;
}

}

(:|

Arhive with (https://docs.google.com/leaf?id=0B1q4rMtgXcvTYTNkYjE5OGQtMjk1Ni00NWIyLWFkZGUtZWZmOGJlZjUzZTFm&hl=en&authkey=CPrdp-sB) sources at google docs

sven
27 Dec 2010, 6:04 AM
I think the problem you are having is the one i fixed recently. It will be part of one of the next releases.

OZKA
27 Dec 2010, 6:36 AM
It is great news :) But we planed to use live grid in all other forms containing grids. Can we get the hotfix? Or please suggest the easy way how to solve this problem ourself. Or may be there is any work around to call "forced redraw" of this cell, or something else?

sven
27 Dec 2010, 8:29 AM
There is no easy workaround for this. LiveGridView was never and will never be designed to fully work with this, because its a "live" streaming view.

kirikol
27 Dec 2010, 1:35 PM
Could Sencha fix such or similar problem for a customer who paid for support?

sven
27 Dec 2010, 2:09 PM
When a fix is available, it will be in SVN. If you have a support subscription, you have access to SVN and could get the fix.

kirikol
27 Dec 2010, 2:39 PM
Thank you for reply. It is important for me to make a decision about buying support, this fix is already in SVN? Or it is not? If not, when the fix can be expected? And one more question: how often Sencha's SVN is updated?

sven
27 Dec 2010, 2:42 PM
No its not yet in SVN.

SVN is updated as soon as fixes or new features are available. There is no timeline for this.