PDA

View Full Version : problems updating a store



Martin.Trummer
19 Aug 2009, 12:48 AM
I have a ListStore with BeanModel instances in it
the list view is displayed correctly.

when the user changes some data, I get the BeanModel from the store and set the changed data on the bean: after that I call listStore.update(beanModel).
When I do that I get an Invalid Argument error (in hosted mode - didn't try webmode yet) - see stack trace at the end of this post
is this the correct way do update the list store at all?
if so, any ideas what could be the problem?
cheers,
martin



com.google.gwt.core.client.JavaScriptException:
(Error): Ung├╝ltiges Argument.
number: -2147024809
description: Ung├╝ltiges Argument.
at com.google.gwt.dom.client.Node$.removeChild$(Native Method)
at com.google.gwt.user.client.DOM.removeChild(DOM.java:984)
at com.extjs.gxt.ui.client.core.El.removeChild(El.java:1670)
at com.extjs.gxt.ui.client.widget.ListView.onUpdate(ListView.java:749)
at com.extjs.gxt.ui.client.widget.ListView$3.storeUpdate(ListView.java:625)
at com.extjs.gxt.ui.client.store.StoreListener.handleEvent(StoreListener.java:42)
at com.extjs.gxt.ui.client.store.StoreListener.handleEvent(StoreListener.java:1)
at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:73)
at com.extjs.gxt.ui.client.store.Store.update(Store.java:506)

Martin.Trummer
1 Sep 2009, 5:18 AM
should I provide some more info?
if so: what code would be interesting?

Arno.Nyhm
1 Sep 2009, 5:47 AM
if you extract a standalone working example it is the best. then its just easy to copy and past and to debug your problem.

Martin.Trummer
1 Sep 2009, 10:03 AM
ok - i got a working example
simply start it in hosted mode - double click on any item in the list view and the hosted mode shell will show you the exception

I am using GWT 1.5.3 and GXT 1.2.4 for this example


package com.tfact.client;

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

import com.extjs.gxt.ui.client.Events;
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.BeanModelTag;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ListViewEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ListView;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class ListViewTest implements EntryPoint {

public class ConcreteModelData implements BeanModelTag {
private String name;

public ConcreteModelData() {
super();
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

}

private ListStore<BeanModel> listStore;
private ListView<BeanModel> listView;

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());
viewport.setBorders(false);

listStore = new ListStore<BeanModel>();
listView = new ListView<BeanModel>();


listView.addListener(Events.DoubleClick, new Listener<ListViewEvent>() {

public void handleEvent(ListViewEvent event) {
ModelData modelData = event.listView.getStore().getAt(event.index);
if (modelData == null) {
return;
}
if (modelData instanceof BeanModel) {
BeanModel beanModel = (BeanModel) modelData;
ConcreteModelData item = beanModel.getBean();
item.setName(item.getName()+"-X");
listStore.update(beanModel);
}
}

});

initListView();

viewport.add(listView);

initData();

RootPanel.get().add(viewport);
}

private void initData() {
listView.getStore().removeAll();

List<BeanModel> beanModels = new ArrayList<BeanModel>();
// build BeanModel instances and fill the gridStore
BeanModelFactory factory = BeanModelLookup.get().getFactory(ConcreteModelData.class);
for (int i = 1; i<5; i++) {
ConcreteModelData modelData = new ConcreteModelData();
modelData.setName("name"+i);

BeanModel model = factory.createModel(modelData);
beanModels.add(model);
}
listView.getStore().add(beanModels);
listView.refresh();
}

private void initListView() {
listView.setStore(listStore);

String template =
"<div>"+
"<tpl for=\".\">" +
"<div class='x-thumb-wrap'>" +
"<span class='x-editable'>{name:htmlEncode}</span>" +
"</div>" +
"</tpl>" +
"</div>" +
"<div class='x-clear'></div>";

listView.setTemplate(template);
listView.setItemSelector("div.x-thumb-wrap");
}

}

Arno.Nyhm
2 Sep 2009, 3:28 AM
NOTE: i try this in GXT 2.0 - only some changes needed

NOTE2: there is a bug in GXT2.0 you can not use the inside bean class. you have to place it in its own file ConcreteModelData.java



there was something wrong with your template:


solution a) change to default template:



private void initListView() {
listView.setStore(listStore);
listView.setDisplayProperty("name");
}



solution b) patch the template like other simple templates in the listview class:


private void initListView() {
listView.setStore(listStore);

String template =
"<tpl for=\".\">" +
" <div class='x-thumb-wrap'>" +
" <div>" +
" <span class='x-editable'>{name:htmlEncode}</span>" +
" </div>" +
" <div class='x-clear'></div>" +
" </div>" +
"</tpl>";

listView.setTemplate(template);
listView.setItemSelector("div.x-thumb-wrap");
}

Martin.Trummer
2 Sep 2009, 5:37 AM
thanks a lot
I found out that it works, when I skip the div around the tpl tags



template =
"<tpl for=\".\">" +
"<div class='x-thumb-wrap'>" +
"<span class='x-editable'>{name:htmlEncode}</span>" +
"</div>"
"</tpl>" +
"<div class='x-clear'></div>";
But I'm not sure, why.
I think that the css-selector looks good and should also work if the outer div tags exist.

In this example it is not a problem, but what if I wanted a template to display all entries vertically?
Currently I use a template like this:


"<table>"+
"<tr>" +
"<tpl for=\".\">" +
"<td class='x-thumb-wrap'>" +
"<div>" +
"<span class='x-editable'>{name:htmlEncode}</span>" +
"<div class='x-box'>" +
"<div class='x-thumb'>" +
"Image for {name}'>" +
"</div>" +
"</div>" +
"</div>" +
"</td>" +
"</tpl>" +
"</tr>" +
"</table>" +
"<div class='x-clear'></div>";

with this css-selector :

"td.x-thumb-wrap"

In this case I can't just skip the outer tags (table, tr)?