How do we Bind a image to a TileRecord of a TileGrid

SmartGWT 5.0
FireFox 31.0

Im trying to use TileGrid feature in my application, but any how the grid is not able to render itself. I tried the following steps.

TileGrid tileGrid = new TileGrid();

tileGrid.setTileWidth(158);
tileGrid.setTileHeight(205);

tileGrid.setHeight(400);
tileGrid.setCanReorderTiles(true);
tileGrid.setShowAllRecords(true);
tileGrid.setData(returnImages());

DetailViewerField pictureField = new DetailViewerField("picture");
pictureField.setType("image");
pictureField.setImageWidth(186);
pictureField.setImageHeight(120);

DetailViewerField commonNameField = new DetailViewerField("commonName");
tileGrid.setFields(pictureField,commonNameField);
addItem(tileGrid)


private TileRecord [] returnImages()
{

TileRecord[] record = new TileRecord[2] ;

record[0].setAttribute("picture", "[SKIN]/RichTextEditor/text_align_center.png");
record[0].setAttribute("commonName", "xyz");

record[1].setAttribute("picture", "[SKIN]/RichTextEditor/text_align_right.png");
record[1].setAttribute("commonName", "abc");

return record;

}

But when i add tileGrid to Window its showing a blank window. I guess TileRecord is not returning any thing. How do we use TileRecord with a grid.