Ext_GWT: Image Gallery box using a ListView

[Flavio Ortellao]

I'm trying to build an image gallery, just like this "Chart Gallery" you can see in the example provided in this link http://www.sencha.com/examples/pages/charts/gallery.html.
In tihs example, I can see that the gallery is implemented with a ListView containing a ListStore, and that ListStore cointains some kind of ModelData.

    ListStore<GalleryChartModel> store = new ListStore<GalleryChartModel>();  
    store.add(new GalleryChartModel("Area", "area.gif", new AreaChartExample()));  
    store.add(new GalleryChartModel("Pie", "pie.gif", new PieChartExample()));  
.....

....
    ListView<GalleryChartModel> view = new ListView<GalleryChartModel>() {  
      @Override  
      protected GalleryChartModel prepareData(GalleryChartModel model) {  
        String s = model.get("name");  
        model.set("shortName", Format.ellipse(s, 15));  
        return model;  
      }  
  
    };  
    view.setId("img-chooser-view");  
    view.setTemplate(getTemplate(!Examples.isExplorer() ? "../../" : ""));  
    view.setStore(store);  

And that GalleryChartModel is implemented this way

public class GalleryChartModel extends BaseModelData {

	static final long serialVersionUID = 100010016;

	protected GalleryChartModel() {

	}

	public GalleryChartModel(String name, String path, ChartModelExample example) {
		setName(name);
		setPath(path);
		setExample(example);
	}

	public void setName(String name) {
		set("name", name);
	}

	public void setPath(String path) {
		set("path", path);
	}

	public void setExample(ChartModelExample example) {
		set("example", example);
	}

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

	public String getPath() {
		return get("path");
	}

	public ChartModelExample getExample() {
		return get("example");
	}
}

But I can't understand the inherent logic of this code: there are 3 properties in the model, how do the framework know how to interpret this properties? I mean: In this last class, there are two propperties (path and name) that seems to be used for rendering but i dont understand how.

There's another native method (something I don't understand) that is implemented tis way:

  private native String getTemplate(String base) /*-{ 
    return ['<tpl for=".">',   
    '<div class="thumb-wrap" id="{name}" style="border: 1px solid white">',   
    '<div class="thumb"><img src="' + base + 'samples/images/thumbs/charts/{path}" title="{name}"></div>',   
    '<span class="x-editable">{shortName}</span></div>',   
    '</tpl>',   
    '<div class="x-clear"></div>'].join(""); 
  }-*/;  

We can see "name", "path" and "shortName" words appearing here, but I don't know what this means.
Can anyone give me a clue?