Wednesday, August 19, 2009

GXT - Progress bar in grid

I want to add progress bar into the grid widget but the grid cell does not support widget inserting.

After doing research from internet, i found out one solution which is render the progress bar by inserting plain div. Here is the code i used to show the progress bar in the grid.

column.setRenderer(new GridCellRenderer()
{
public String render(Model model, String property, ColumnData config, int rowIndex, int colIndex, ListStore
store)
{
int progress = 70;
String textFront = progress < 100 ? "" : progress+"%";
String textBack = progress >= 100 ? "" : progress+"%";
return "<div class=\"x-progress-wrap\" align=\"left\">" + "<div class=\"x-progress-inner\">" + "<div class=\"x-progress-bar" + "\" style=\"width:" + progress + "%;\">" + "<div class=\"x-progress-text\" style=\"width:100%;\">" + textFront + "</div></div>" + "<div class=\"x-progress-text x-progress-text-back\" style=\"width:100%;\">" + textBack + "</div>" + "</div></div>";
}
});


Hope it helps.

No comments: