Grids and Stores and ModelData

[Michi_de]

Hi everybody!
I need a little help, please.
Actually im trying on coding a grid with Ext GWT. My site will be pretty easy:
a html page with a grid. This grid contains "users". The class "users" is just a class i created in the package of my project. With an RPC i can develop a servlet to get a user[] collection from a database, thats not the point where i need help.
In the example on this page i found this code:


ListStore<Stock> store = new ListStore<Stock>();

So "Stock" implement "ModelData" and use the methods which the interface want it to. This means, i have to say that my "user" class have to implement "ModelData" , right?
Can someone give me a little example, of how to implement this methods and what they exactly should return? I think its crucial to make there everything correct inside the methods i get from "ModelData", isnt it?

And then one more thing:

store.add(TestData.getStocks());
Is it possible to give this "store" my user[] ? Or is it not that easy?

[Michi_de]

By the way, this is the grid example i meant:

http://extjs.com/examples/grid/grid.html

Any idea what "store.add(TestData.getStocks()); " exactly the return data is in ".getStocks()" and how i can get my users[] into such a "store" ?

Sorry for double post, i just wanted to make my opening post more clear. I did not edited it, because some people allready read my thread...

[amundb]

Did you take a look at the Stock class that is included with the sample code? The Store.add() method takes a List of ModelData classes. Your User class will have to extend BaseModel or BaseModelData. As you can see from Stock, all it does is set some properties on a Map, and wraps them in traditional Getters and Setters. Then once you get you User classes into the Store that is attached to a Grid, you can tell your grid columns what properties to look at in your User class.



public class Stock extends BaseModel {

private static DateTimeFormat format = DateTimeFormat.getFormat("M/d h:mma");

public Stock() {
}

public Stock(String name, String symbol, double open, double last) {
set("name", name);
set("symbol", symbol);
set("open", open);
set("last", last);
set("date", new Date());
set("change", last - open);
}

public Stock(String name, double open, double change, double pctChange, String date, String industry) {
set("name", name);
set("open", open);
set("change", change);
set("percentChange", pctChange);
set("date", format.parse(date));
set("industry", industry);
}

public String getIndustry() {
return get("industry");
}

public void setIndustry(String industry) {
set("industry", industry);
}

public Date getLastTrans() {
return (Date) get("date");
}

public String getName() {
return (String) get("name");
}

public String getSymbol() {
return (String) get("symbol");
}

public double getOpen() {
Double open = (Double) get("open");
return open.doubleValue();
}

public double getLast() {
Double open = (Double) get("last");
return open.doubleValue();
}

public double getChange() {
return getLast() - getOpen();
}

public double getPercentChange() {
return getChange() / getOpen();
}

public String toString() {
return getName();
}

}

[Michi_de]

Thanks! Now i tryed to extend the BaseModel to my "user" and get some odd error:

[WARN] Field 'private final com.google.gwt.i18n.client.impl.ConstantMap.OrderedConstantSet<java.lang.String> keys' will not be serialized because it is final

Any idea what cause that?
Here is my code for "Benutzer" what means "user" in german.



publicclass Benutzer extends BaseModel {


public Benutzer() {

}

public Benutzer (String name, String vorname, String matrikelnr, Date gebdatum) {
set("vorname", vorname);
set("name", name);
set("matrikelnr", matrikelnr);
set("gebdatum", gebdatum);
}

void setName (String name){
set("name", name);
}
void setVorname (String vorname){
set ("vorname", vorname);
}
void setMatrikelnr (String matrikelnr){
set ("matrikelnr", matrikelnr);
}
void setGebdatum (Date gebdatum){
set ("gebdatum", gebdatum);
}
public String getName (){
return get("name");
}
public String getVorname (){
return get("vorname");
}
public String getMatrikelnr(){
return get("matrikelnr");
}
public Date getGebdatum(){
return get("gebdatum");
}
}


What i wondering now is, how to get the "user[]" into a store? Please give me a little hint.

[amundb]

User[] myUserArray = new User[2]{someuser, anotheruser};

store.add(Arrays.asList(myUserArray));

[Michi_de]

Hey, thanks so far!
But workin with Ext GWT is realy hard! No tutorials and stuff...
I realy appreciate ur help so far!
There is one more question concerning the grid:


column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100); </SPAN>
configs.add(column);

So this "setId" have to be the same, as the "symbol" id in the Stock class?

Is there something like a tutorial or explanation of grids for Ext GWT?
Its not easy, to get an grid workin....</SPAN>

[amundb]

Yes, the column.setId("some_property_name"); has to map to the property in your user class you wish for that column to display.

As for demos/tutorials, have you seen this yet? http://extjs.com/explorer/#overview (http://extjs.com/forum/../explorer/#overview)

[Michi_de]

I try to create the grid with this code:




void createStatistikGrid (Benutzer[] users){

//FIRST: create the columns



configs = new ArrayList<ColumnConfig>();



ColumnConfig column = new ColumnConfig();


column.setId("vorname");
column.setHeader("Vorname");
column.setWidth(200);
configs.add(column);



column.setId("nachname");
column.setHeader("Nachname");
column.setWidth(200);
configs.add(column);



column.setId("matrikelnr");
column.setHeader("Matrikelnr.");
column.setWidth(150);
configs.add(column);


//SECOND: add the Benutzer[] array to a ListStore


ListStore<Benutzer> store = new ListStore<Benutzer>();
store.add(Arrays.asList(users));


// LAST: set the ContentPanel propperties, create a Grid and add it to the Cont.Panel


ColumnModel cm = new ColumnModel(configs);



cp.setBodyBorder(false);
cp.setHeading("Statistik");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(600, 300);



Grid<Benutzer> grid = new Grid<Benutzer>(store, cm);
grid.setStyleAttribute("borderTop", "none");
grid.setAutoExpandColumn("name");
grid.setBorders(true);

cp.add(grid);


My "Benutzer" class :



public Benutzer (String name, String vorname, String matrikelnr, Date gebdatum) {
set("vorname", vorname);
set("name", name);
set("matrikelnr", matrikelnr);
set("gebdatum", gebdatum);
set("id", "");
set("anlegDat", "");
}
...

There are all the get'er and set'er methods implemented too.

I realy dont see what im doing wrong?
I can see the CP, but its empty. Its 600*300, like it should. But the content is missing.

Plus, i allways get an "java.lang.ArrayIndexOutOfBoundsException: -1" exception, when i try to generate the grid a second time.
(here is the logic behind my application:
clickin the "statistic" button, i start a method which does the RPC. When the Async Callback is recieved i get a Benutzer[] array, then the "createStatistikGrid (Benutzer[] users)" method get started. )

/EDIT:
Now i added .layout() in the end to the "cp" like this:



cp.add(grid);
cp.layout();

I get the "java.lang.ArrayIndexOutOfBoundsException: -1" every time i click on "statistics" button. Why?

[Michi_de]

The problem is solved !!

... i just forgot to put "column = new ColumnConfig(); " every time i created a column ...

Sorry guys !